リスト項目の高さが変化するバウンス効果js

私はこの課題を解決しようとしています。リスト項目をボタンクリックで2回バウンスする必要があります。しかし、彼らは最初のバウンス距離の40％で2回目を跳ね返す必要があります。私はリスト要素の単純なバウンスを実装することしかできませんでしたが、バウンス距離の変更を実装する方法を見つけることができませんでした。それを手伝ってもらえますか？私はあなたのアドバイスに非常に感謝しています！リスト項目の高さが変化するバウンス効果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

答えて

関連する問題