Question

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

Answer 2

如果使用全局变量来控制状态，为什么要在处理函数中创建局部变量并更改其值？

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

Answer 3

不知道为什么$('foo').attr('bar')失败但使用数据工作......

http://jsfiddle.net/HdFSv/3/

$(document).ready(function () {
    $("#main").click(function () {
        if ($("#main").data('open')) {
            $("#main").data('open',0);
            $("#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);
        } else {
            $("#main").data('open',1);
            $("#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);
        }
    });
})

在两个动画之间切换只能工作一次

3 个答案:

演示here