Question

我正在创建一个UI组件，其中目标元素在单击时会引发一系列动画。动画应该按顺序发生：单击目标元素（targetEl），透明叠加层淡化目标元素（叠加层），另一个div向下滑动叠加层（slideover），slideover有一个关闭图标，当关闭时单击图标上一个动画反向发生（轻柔滑动，叠加淡出）。

我的问题是：我使用嵌套的.on（“点击”）和动画调用。动画适用于前几次点击，但在第3或第4次点击时表现奇怪。叠加层会快速淡入/淡出，您根本无法看到slideover的动画效果。我认为正在发生的事情是动画以某种方式失序。

这是我的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是overlay的子节点，它是targetEl的子节点，我不希望点击子节点“落到”父元素。任何帮助是极大的赞赏！

Answer 1

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

这可能就是为什么它看起来如此奇怪。

将那些绑定之前绑定到targetEL点击触发。

jQuery动画回调按顺序触发

1 个答案: