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) を変更してボタンをクリックすると、2 つのアニメーションが実行されます。選択オプションを再度変更すると、ツリーアニメーションが実行されます。なにが問題ですか。助けてください。

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

これは問題にならないかもしれませんが、手がかりが得られる場合は、Firebug などの Javascript デバッガーの使用方法を学ぶ必要があります。

デバッガーを使用し、「クリック」関数内にブレークポイントを設定した場合、オプションのドロップダウンを変更した回数まで合計すると、複数回ヒットすることがわかります。これは、「animation()」関数が、呼び出されるたびに新しい関数を「クリック」イベントにバインドし、以前のものを削除しないためだと思います。そのため、ボタンをクリックすると「クリック」関数が複数回実行されます。

于 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;
    });
});

そうしないと、アニメーション化するたびにクリックイベントをボタンにバインドしているため、問題が発生します。最初にクリックが 1 回バインドされるため、1 回アニメーション化されます。次に、アニメーションが再度クリックするようにバインドされるため、2 回アニメーション化されます。また、div の動作を停止させて新しいアニメーションを開始させる stop() にも注意してください。これにより、ボタンを複数回クリックして数秒間アニメーションを続けることが防止されます。

于 2013-02-23T04:08:33.163 に答える
0

クリック イベントを複数回バインドしています。

これを次のように変更します。

            $('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 に答える