2

我试图在 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/

任何帮助表示赞赏

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 回答
0

不知道为什么$('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);
        }
    });
})
于 2013-10-05T21:03:34.503 回答