在列表項上改變高度的彈跳效果js

我試圖破解這個任務：我需要使按鈕單擊時彈出2次列表項。但他們需要以第一次反彈距離的40％進行第二次反彈。我只能在列表元素上實現簡單的反彈，但是我找不到如何實現反彈距離的改變。你能幫我解決嗎？我會非常感謝您的建議！在列表項上改變高度的彈跳效果js

代碼片段：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
    <title>Bounce Effect</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script> 
    <style> 
     ul li{ 
      list-style-type: none; 
     } 

     li { 
      float:left; 
      margin-right:10px; 
     } 
    </style> 
</head> 
<body> 
    <h2>Bounce Effect!</h2> 
    <button id="button" onclick="bounceEffect()">Click me!</button> 
    <h2 id="header">Bouncer!</h2> 
    <div id="list"> 
     <ul> 
      <li id="a"><a href="#">1</a></li> 
      <li id="b"><a href="#">2</a></li> 
      <li id="c"><a href="#">3</a></li> 
      <li id="d"><a href="#">4</a></li> 
      <li id="e"><a href="#">5</a></li> 
      <li id="f"><a href="#">6</a></li> 
     </ul> 
    </div>  
    <script type="text/javascript"> 
     function bounceEffect(){ 
      $(document).ready(function() { 
       $('button').click(function() { 
        $('li a').effect("bounce", {times: 2}, 300); 
       }) 
      }); 
     } 
    </script> 
</body> 
</html>

來源

2017-05-05 Cassie

我已經找到了解決我的問題。我剛剛使用距離參數，並藉助外部變量動態地改變它在bounceEffect函數中。它有點慢，但代碼工作得很好。希望，它會幫助別人！

function bounceEffect() { 
      var distance = 60; 
      $(document).ready(function() { 
       $('button').click(function() { 
        $('li a').effect("bounce", {times: 2, distance: distance*=0.4}, 200); 
       }) 
      }); 
     }

來源

2017-05-05 11:24:21 Cassie

在列表項上改變高度的彈跳效果js

回答

相關問題