最简单的方法是使用一个变量作为标志。你会在 UI 事件脚本中一直做这样的事情。您只需在 click 函数中包含一些逻辑来测试动画是否已运行。
var animRun = false
$('#image').click(function(){
if (animRun == false){
//Animation has not run yet, animate it
$('#div2').animate({
opacity:1
},500, function(){
$('#div3').animate({
left:'128px'
},500, function(){
//Your animation is complete so you set the flag to true
animRun = true;
})
})
}else{
//Your flag is set to true so that must mean the animate has been run
//Reverse the animation, making sure to set the flag back to false
}
})
所以你在这里看到的动画函数就是所谓的回调。它们在动画完成时被触发。所以首先图像淡入,然后文本从当前位置滑动到 128,然后标志设置为“真”。所以现在,使用逻辑,你可以知道动画已经运行了。您可能还想禁止在动画运行时触发 click事件。您可以使用另一个标志或类似 preventDefault() 的东西。
这应该足以让你开始。