jquery - 两个动画之间的切换只能运行一次

Question

我试图在 jQuery 中的两个动画之间切换，它似乎只是第一次工作，但是当我尝试再次切换它时它会做一些奇怪的事情，我不知道为什么。在本例中我使用了 switch，但我也尝试了 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/

感谢任何帮助

Answer 1

试试这个:

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

演示 here

<小时/>

或者，使用您的原始代码(有点错误，所以我花了一些时间来调试它):

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

我改变了什么:

• 您只需在点击功能之外定义一次切换
• 我删除了开关内额外的点击处理程序

演示 here