0

我正在尝试执行以下操作，希望有人可以帮助我解决这个问题？我需要以下内容；

  1. 用户单击图像（假设#image1）
  1. 两个函数被触发，第一个是一个 div ( #div2 )，其中有一个图像从原始点击中淡出（大约 50px ...所以它看起来像是从图像中出来的），第二个是另一个 div ( # div3），其中包含文本，从 #div2 下方滑动并延伸约 500 像素。

如果您再次单击#image1 div，它将反转步骤并返回到开始序列。

哦，天哪，我希望这是有道理的？我已经检查了 [a link] http://jquery.com/并且我可以弄清楚这一点，理想情况下，如果有人可以在 jsfiddle 上发布一个示例，我将不胜感激。

4

1 回答 1

0

最简单的方法是使用一个变量作为标志。你会在 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() 的东西。

这应该足以让你开始。

于 2012-10-17T15:57:55.763 回答