jQuery动画停止

时间:2014-08-03 11:32:08

标签: jquery animation

所以我得到了像

这样的html结构
    <html>
      <body>
        <div class="window">
           ////some content
        </div>
      </body>
    <html>

现在想要在最小化/最大化窗口时创建一个与Windows 7中类似的窗口动画。 到目前为止,我得到了

    somejObject.on("click",function(){
        if(////some code checking whether window is to be minimized)         
            jObject.stop(true,false).animate({"width":"0px","height":"0px","top":vanishingPoint.top,"left":vanishingPoint.left,"margin-top":-activeprogOuterHeight/2,"margin-left":-activeprogOuterWidth/2,"opacity":"0.0"},windowAnimationDuration);
        else    ////maximize window
            jObject.stop(true,false).animate({"top":windowProperties.top,"left":windowProperties.left,"margin-top":windowProperties.margin_top,"margin-left":windowProperties.margin_left,"height":windowProperties.height,"width":windowProperties.width,"opacity":"1.0"},windowAnimationDuration);
    });

其中somejObject是一个div,它会导致单击窗口动画。 jObject是一个包含class="window"的div(请参阅html标记),vanishingPoint包含目标坐标,activeprogOuterHeight以及activeprogOuterWidth目标元素的大小动画,windowProperties包含将窗口放置在最小化之前所需的信息,windowAnimationDuration是表示动画持续时间的值;

一切都没什么特别的,它是有效的,因此不是我的问题(以防万一有人想看一些代码)。

只要我点击普通用户所期望的频率对象,一切正常。但是,当我开始将频率增加到一定水平时,带class="window"的div的高度开始缓慢缩小,并且取决于我持续点击的时间长度,最终没有留在窗口容器上的高度导致内部html内容 - 好吧 - 看起来不应该。

我使用stop()参数玩了一点:第一个参数必须是true,以防止在我的情况下排除动画。无论我将两个句点true作为第二个参数还是两者的随机组合,问题依然存在。 我从stop()文档(http://api.jquery.com/stop/)得到的,第一个参数是真的应该阻止动画排队,而第二个是false应该停止动画将它留在当前状态导致以下动画从最后一个结束的地方开始。记住这一点,我会期望动画停留在一个小范围内,具体取决于点击频率,然后完成最后一次点击引起的最后一个动画。

那么我做错了什么?

修改1 正在发生的事情的粗略小说:jsFiddle

2 个答案:

答案 0 :(得分:1)

根据你的jsfiddle答案:http://jsfiddle.net/a9fF4/ - 先致电stopanimate,然后再更新你的windowProperties

答案 1 :(得分:0)

调用.stop(true, true)应该可以解决这个问题。请参阅http://jsfiddle.net/8B8vw/(当您从小提琴中删除对.stop的调用时,这与您当前的情况类似,对吧?)所以我会在代码中的其他地方查找问题(如果停止不起作用)。< / p>