在列表项上改变高度的弹跳效果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

回答

相关问题