1

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

<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）并单击按钮时，会执行两个动画。当我再次更改选择选项时，会出现树动画。怎么了。请帮忙。

4

5 回答 5

0

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

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

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

于 2013-02-23T04:05:07.203 回答
0

尝试

$(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);
    });

});
于 2013-02-23T04:05:43.187 回答
0

这可能无关紧要，但您应该学习如何使用 Javascript 调试器，例如 Firebug，如果这可能会给您提供线索的话。

如果您使用了调试器，并且在“click”函数中设置了断点，您会看到它被多次命中，加起来就是您更改选项下拉菜单的次数。我猜那是因为您的“animation()”函数每次调用时都会将新函数绑定到“click”事件，而不是删除以前的函数，因此单击按钮将多次执行“click”函数。

于 2013-02-23T04:06:29.203 回答
0

这可能是你的意思

$(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;
    });
});

否则，您每次制作动画时都会将单击事件绑定到按钮，这将成为问题。第一次点击绑定一次，所以它动画一次，然后你的动画绑定到再次点击，所以它动画两次。还要注意 stop() ，它会导致 div 停止它正在做的事情并开始一个新的动画，以防止你多次单击按钮并保持动画几秒钟的东西。

于 2013-02-23T04:08:33.163 回答
0

您正在多次绑定 click 事件。

将其更改为：

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

请记住.off并.on替换.bind，.unbind 此外，出于性能原因，最好将这样的函数链接起来。

于 2013-02-23T04:29:39.933 回答