Question

我正在尝试破解这项任务：我需要在按钮点击时使列表项反弹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>

Answer 1

我找到了解决问题的方法。我刚刚使用了 distance 参数，并在 bounceEffect 函数的外部变量的帮助下动态更改了它。它有点慢，但代码工作正常。希望，它会帮助别人！

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

在列表项js上更改高度的跳出效果

1 个答案: