我试图在 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/
感谢任何帮助
最佳答案
试试这个:
$(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
关于jquery - 两个动画之间的切换只能运行一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19202419/