jQuery的动画回调射出序列

我正在创建一个UI组件，其中一个目标元素，当点击时，引发一系列动画。该动画应该按顺序发生：单击目标元素（targetEl），透明叠加层将淡入目标元素（叠加层），另一个div向下滑过叠加层（幻灯片），幻灯片将有一个闭合图标，当闭合图标被点击，之前的动画发生在相反的位置（幻灯片向上滑动，覆盖图淡出）。jQuery的动画回调射出序列

我的问题是这样的：我使用嵌套.on（“click”）和动画调用。该动画完美适用于前几次点击，但在第3次或第4次点击后表现奇怪。叠加层将快速淡入/淡出，而且根本看不到幻灯片的动画。我认为正在发生的事情是动画以某种方式失序。

这里是我JS/jQuery的：

$(targetEl).on("click", function() { 

    $(overlay).on("click", function(e){e.stopPropagation();}); 

    $(overlay).fadeIn("slow", function(){ 
     $(slideover).animate({"top":targetEl.height()/3}, 1000); 
    }); 

    $("#close").on("click", function(e){ 
      e.stopPropagation(); 

      $(slideover).animate({ 
       "top":'-'+targetEl.height()/3}, 1000, function({ 
         $(overlay).fadeOut("slow"); 
       }); 
      }); 
     });

我使用stopPropagation，我这样做，因为slideover是叠加的孩子，这是targetEl的孩子，我不想对孩子要点击“通过“到父元素。任何帮助，非常感谢！

来源

2012-08-02 ginc

每当您基于（targetEL）点击进行动画制作时，您都会将新事件绑定到叠加点击和#close元素。

这可能是它看起来很奇怪的原因。

执行那些绑定之前的到targetEL点击触发。

来源

2012-08-02 21:16:19

jQuery的动画回调射出序列

回答

相关问题