Question

我的动画有问题。这是我的代码：

<html>
    <head>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
        <title>title</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: green;
                position:relative;
                left: 0px;
            }
        </style>
    </head>
    <body>
        <h1>Animation</h1>
        <select id='text_1' type="text">
            <option>100</option>
            <option>200</option>
            <option>300</option>
            <option>400</option>
            <option>500</option>
            <option>600</option>
            <option>700</option>
            <option>800</option>
            <option>900</option>
            <option>1000</option>
        </select>
        <button>Animate Div</button><br/><br/>
        <div></div>
        <script>
            $(document).ready(function(){
                var number = 500;
                $('#text_1').bind('change', function(){
                    var number_2 = $('#text_1').val() != '' ? $('#text_1').val() : 500;
                    animation(number_2);
                });
                animation(number);
            });
            function animation(num){
                $('button').click(function(){
                    $('div').animate({
                        'left': num+'px',
                    }, 1000).animate({
                        'left': '0px',
                    }, 1000);;
                });
            }
        </script>
    </body>
</html>

当我更改选择选项（例如：300）并单击按钮时，则执行两个动画。当我再次更改选择选项时，然后执行树动画。怎么了。请帮忙。

Answer 1

这不是最优雅的解决方案，但如果您将代码修改为如下所示：

function animation(num) {
    $('button').unbind('click'); //this removes the old click event
    $('button').click(function(){
        ....
    }
}

那么这应该可以解决你的问题。

Answer 2

尝试

$(document).ready(function()
{
    $('button').on('click',function()
    {
        var num = $('#text_1').val() != '' ? $('#text_1').val() : 500;

        $('div').animate(
        {
            'left': num+'px',
        }, 1000).animate(
        {
            'left': '0px',
        }, 1000);
    });

});

Answer 3

这可能无关紧要，但你应该学习如何使用Javascript调试器，比如Firebug，如果这可能会给你一个线索。

如果您使用了调试器，并在＆＃34中设置断点，请单击＆＃34;功能，您会看到它被多次击中，累计达到您更改选项下拉列表的次数。我猜这是因为你的动画（）＆＃34;函数将一个新函数绑定到＆＃34; click＆＃34;事件每次被调用，而不是删除之前的事件，因此单击按钮将执行＆＃34;点击＆＃34;功能多次。

Answer 4

这就是你的意思

$(document).ready(function(){
    var number = 500;
    $('button').click(function(){
        $('div').stop().animate({
            'left': number+'px',
        }, 1000).animate({
            'left': '0px',
        }, 1000);
    });
    $('#text_1').bind('change', function(){
        number = $('#text_1').val() != '' ? $('#text_1').val() : 500;
    });
});

否则每次动画都会将click事件绑定到按钮，这会成为问题。第一次点击绑定一次，所以它动画一次，然后你动画绑定再次点击，所以它动画两次。另请注意stop（）会导致div停止正在执行的操作并启动新动画以防止多次单击按钮的内容并保持动画几秒钟。

Answer 5

您多次绑定点击事件。

将其更改为：

            $('button').off('click').on('click', function(){
                $('div').animate({
                    'left': num+'px',
                }, 1000).animate({
                    'left': '0px',
                }, 1000);;
            });

请注意.off和.on已取代.bind和.unbind 此外，出于性能原因，最好将这样的函数链接起来。

jquery动画重复了好几次

5 个答案: