0

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

我的问题是：我正在使用嵌套的 .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 是 overlay 的子元素，它是 targetEl 的子元素，我不希望对子元素的点击“落入”父元素。任何帮助是极大的赞赏！

4

1 回答 1

0

每次基于（targetEL）单击制作动画时，您都将新事件绑定到覆盖单击和#close 元素。

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

在 targetEL 单击触发之前执行这些绑定。

于 2012-08-02T21:16:19.633 回答