Question

我试着做以下事情并希望有人可以帮我解决这个问题？我需要以下内容;

用户点击图片（假设＃image1 ）



触发了两个函数，第一个是div（ #div2 ），其中的图像从原始点击中淡出（大约50px ......所以它看起来像是从它出来的图像），第二个是另一个带有文本的div（＃div3 ），从＃div2下面滑动并延伸大约500px。

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

哦，jeez我希望这有道理吗？我已经检查了[链接] http://jquery.com/，我只是可以解决这个问题，理想情况下如果有人可以在jsfiddle上发布一个例子我会非常感激。

Answer 1

最简单的方法是使用变量作为标志。你会在UI事件脚本中一直做这样的事情。您只需在点击功能中包含一些逻辑，以测试动画是否已运行。

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，然后将标志设置为“true”。所以现在，使用逻辑，您可以反转动画，知道它已经运行。您可能还希望禁用在动画正在运行时触发的单击事件。您可以使用另一个标志或者类似preventDefault（）。

这应该足以让你开始。

一次单击两个函数事件的jquery动画

1 个答案: