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