2

jQuery で 2 つのアニメーションを切り替えようとしていますが、初めてしか機能しないようですが、もう一度切り替えようとすると奇妙なことが起こり、理由がわかりません。この場合はスイッチを使用しましたが、if ステートメントも試してみましたが、同じように動作します。

jQuery

    $("#one").animate({left:"250px", opacity:1}, 300)
    $("#two").animate({left:"150px", top:"150px", opacity:1}, 500)
    $("#three").animate({left:"10px", top:"250px", opacity:1}, 700)
    var toggle=1

    switch(toggle)
    {
        case 0:$("#main").click(function(){
            $("#one").animate({left:"250px", opacity:1}, 300)
            $("#two").animate({left:"150px", top:"150px", opacity:1}, 500)
            $("#three").animate({left:"10px", top:"250px", opacity:1}, 700)
            var toggle=1
        }); break;

        case 1:$("#main").click(function(){
            $("#one").animate({left:"0px", opacity:0}, 300)
            $("#two").animate({left:"0px", top:"0px", opacity:0}, 500)
            $("#three").animate({left:"0px", top:"0px", opacity:0}, 700)
            var toggle=0
        }); break; 
    }
    //end of switch

デモ: http://jsfiddle.net/HdFSv/1/

どんな助けでも大歓迎

4

3 に答える 3

4

これを試して：

$(document).ready(function(){
    var toggle=1
    $("#main").click(function(){
        if(toggle){
                $("#one").animate({left:"250px", opacity:1}, 300)
                $("#two").animate({left:"150px", top:"150px", opacity:1}, 500)
                $("#three").animate({left:"10px", top:"250px", opacity:1}, 700)
                toggle=0;
        }else{

                $("#one").animate({left:"0px", opacity:0}, 300)
                $("#two").animate({left:"0px", top:"0px", opacity:0}, 500)
                $("#three").animate({left:"0px", top:"0px", opacity:0}, 700)
                toggle=1;
        }
        //end of switch
    });
})

デモはこちら

または、元のコードを使用します (少しバグがあったため、デバッグに時間がかかりました):

$(document).ready(function(){
    var toggle = 0;
    $("#main").click(function(){         
        switch(toggle){
            case 0:
                $("#one").animate({left:"250px", opacity:1}, 300)
                $("#two").animate({left:"150px", top:"150px", opacity:1}, 500)
                $("#three").animate({left:"10px", top:"250px", opacity:1}, 700)
                toggle=1;
         break;

            case 1:
                $("#one").animate({left:"0px", opacity:0}, 300)
                $("#two").animate({left:"0px", top:"0px", opacity:0}, 500)
                $("#three").animate({left:"0px", top:"0px", opacity:0}, 700)
                toggle=0;
        break; 
        }
        //end of switch 
    });
})

私が変更したこと：

  • トグルを一度だけ定義し、クリック機能の外側で行う必要があります
  • スイッチ内の余分なクリック ハンドラを削除しました

デモはこちら

于 2013-10-05T20:38:43.307 に答える
1

グローバル変数を使用して状態を制御している場合、ハンドラー関数内にローカル変数を作成し、その値を変更するのはなぜですか?

case 0:$("#main").click(function() {
        $("#one").animate({left:"250px", opacity:1}, 300)
        $("#two").animate({left:"150px", top:"150px", opacity:1}, 500)
        $("#three").animate({left:"10px", top:"250px", opacity:1}, 700)
        var toggle=1
    }); break;

それ以外の

var toggle=1

あなたが使用する必要があります

toggle=1
于 2013-10-05T20:40:21.600 に答える