波紋效果Css | ipad Native App

Question

波紋效果不正常。 - iPad Native應用程序。

1. 效果應用於導航上的所有按鈕，而應該在li上工作。

請讓我知道錯誤在哪裏。

(function (window, $) { 
 
    
 
    $(function() { 
 
    
 
    $('.ripple').on('click', function (event) { 
 
     event.preventDefault(); 
 
     
 
     var $div = $('<div/>'), 
 
      btnOffset = $(this).offset(), 
 
      xPos = event.pageX - btnOffset.left, 
 
      yPos = event.pageY - btnOffset.top; 
 
     $div 
 
     .addClass('circle') 
 
     .css({ 
 
      top: yPos - 15, 
 
      left: xPos - 15 
 
     }) 
 
     .appendTo($(this)); 
 

 
     window.setTimeout(function(){ 
 
     $div.remove(); 
 
     }, 1000); 
 
    }); 
 
    
 
    }); 
 
    
 
})(window, jQuery);

nav { 
 
    position: relative; 
 
    width: 1024px; 
 
    background-color: #25518b; 
 
    bottom: 0; 
 
    height: 60px; 
 
} 
 

 
#home-btn { 
 
    position: absolute; 
 
    width: 79px; 
 
    height: 60px; 
 
    left: 0; 
 
    background: url(../images/home.png) no-repeat center center; 
 
    background-size: 28px 27px; 
 
} 
 

 
ul.navi { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    width: 945px; 
 
    position: absolute; 
 
    left: 79px; 
 
} 
 

 
ul.navi li { 
 
    float: left; 
 
    width: 188px; 
 
    height: 60px; 
 
    border-left: 1px #959595 solid; 
 
    font-size: 16.5px; 
 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
    color: white; 
 
    text-align: center; 
 
    display: table; 
 
} 
 

 
ul.navi li a { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 

 
/* Ripple Effect for navigation */ 
 

 
.circle { 
 
    position: absolute; 
 
    width: 30px; 
 
    height: 30px; 
 
    background: white; 
 
    border-radius: 50%; 
 
    -webkit-animation: scale-circle 2.5s; 
 
      animation: scale-circle 2.5s; 
 
} 
 

 
@-webkit-keyframes scale-circle { 
 
    from { 
 
    -webkit-transform: scale(0.2); 
 
      transform: scale(0.2); 
 
    opacity: 0.6; 
 
    } 
 
    to { 
 
    -webkit-transform: scale(100); 
 
      transform: scale(100); 
 
    opacity: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <div id="home-btn"></div> 
 
    <ul class="navi"> 
 
     <li class=""><a href="#" class="ripple active">Link1</a></li> 
 
     <li><a class="ripple" href="#">Link2</a></li> 
 
     <li><a class="ripple" href="#">Link3</a></li> 
 
     <li><a class="ripple" href="#">Link4</a></li> 
 
     <li><a class="ripple" href="#">Link5</a></li> 
 
    </ul> 
 
    </nav>

---

鏈接：http://codepen.io/Ashish9342/pen/wzqEdO

Answer 1

首先，如果你想有一個連鎖反應，儘量使用ripple css animation。嘗試正確定位您的div類circle，並將give proper width and height正確定位。你可以在codepen link這裏查看一個工作示例。

(function (window, $) { 
 
    
 
    $(function() { 
 
    
 
    $('.ripple').on('click', function (event) { 
 
     event.preventDefault(); 
 
      var parent = $(this).parent(); 
 
      var height = parent.height(); 
 
      var width = parent.width(); 
 
     var $div = $('<div/>'), 
 
      btnOffset = $(this).parent().offset(),  
 
      maxW = $("li").width(), 
 
      xPos = $(this).position().left; //event.pageX - btnOffset.left, 
 
      yPos = $(this).position().top; // event.pageY - btnOffset.top; 
 
      
 
     $div 
 
     .addClass('circle') 
 
     .css({ 
 
      width: width, 
 
      height: height, 
 
      top: yPos, 
 
      left: xPos 
 
     }) 
 
     .appendTo($(this)); 
 

 
     window.setTimeout(function(){ 
 
     $div.remove(); 
 
     }, 1000); 
 
    }); 
 
    
 
    }); 
 
    
 
})(window, jQuery);

nav { 
 
    position: relative; 
 
    width: 1024px; 
 
    background-color: #25518b; 
 
    bottom: 0; 
 
    height: 60px; 
 
} 
 

 
#home-btn { 
 
    position: absolute; 
 
    width: 79px; 
 
    height: 60px; 
 
    left: 0; 
 
    background: url(../images/home.png) no-repeat center center; 
 
    background-size: 28px 27px; 
 
} 
 

 
ul.navi { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    width: 945px; 
 
    position: absolute; 
 
    left: 79px; 
 
} 
 

 
ul.navi li { 
 
    float: left; 
 
    width: 188px; 
 
    height: 60px; 
 
    border-left: 1px #959595 solid; 
 
    font-size: 16.5px; 
 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
    color: white; 
 
    text-align: center; 
 
    display: table; 
 
} 
 

 
ul.navi li a { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 

 
/* Ripple Effect for navigation */ 
 

 
.circle { 
 
    position: absolute; 
 
    z-index: 1; 
 
    width: 30px; 
 
    height: 30px; 
 
    background: white; 
 
    border-radius: 50%; 
 
    -webkit-animation: ripple 1s ease-out; 
 
      animation: ripple 1s ease-out; 
 
      opacity: 0.5; 
 

 

 
} 
 

 

 
@keyframes ripple { 
 
    0% { 
 
    transform: scale(0); 
 
    } 
 
    20% { 
 
    transform: scale(1); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(1); 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 

 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css"> 
 

 
    <link rel="stylesheet" href="css/styles.css"> 
 
    <script src="js/script.js"></script> 
 
</head> 
 

 
<body> 
 
\t <nav> 
 
    <div id="home-btn"></div> 
 
    <ul class="navi"> 
 
     <li class=""><a href="#" class="ripple active">Link1</a></li> 
 
     <li><a class="ripple" href="#">Link2</a></li> 
 
     <li><a class="ripple" href="#">Link3</a></li> 
 
     <li><a class="ripple" href="#">Link4</a></li> 
 
     <li><a class="ripple" href="#">Link5</a></li> 
 
    </ul> 
 
    </nav>