Javascript 列表项上高度变化的反弹效果_Javascript_Jquery_Html_Animation_Bounce

Javascript 列表项上高度变化的反弹效果

javascript jquery html animation

Javascript 列表项上高度变化的反弹效果,javascript,jquery,html,animation,bounce,Javascript,Jquery,Html,Animation,Bounce,我试图破解这个任务：我需要使列表项在点击按钮时反弹2次。但它们需要以第一次反弹距离的40%进行第二次反弹。我只能在列表元素上实现简单的反弹，但我找不到如何实现反弹距离的更改。你能帮我吗？我将非常感谢你的建议代码段： <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>Bounce Effect</title> <script

我试图破解这个任务：我需要使列表项在点击按钮时反弹2次。但它们需要以第一次反弹距离的40%进行第二次反弹。我只能在列表元素上实现简单的反弹，但我找不到如何实现反弹距离的更改。你能帮我吗？我将非常感谢你的建议

代码段：

<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>


反弹效应
ulli{
列表样式类型：无；
}
李{
浮动：左；
右边距：10px；
}
反弹效果！
点击我！
保镖！








函数bounceEffect（）{
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（'li a'）。效果（“反弹”{次：2}，300）；
})
});
}

我找到了解决问题的方法。我只是使用了distance参数，并借助bounceEffect函数中的外部变量对其进行了动态更改。这有点慢，但代码运行得很好。希望它能帮助别人

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