0

ターゲット要素をクリックすると一連のアニメーションが開始される UI コンポーネントを作成しています。アニメーションは順番に発生するはずです: ターゲット要素 (targetEl) をクリックすると、透明なオーバーレイがターゲット要素の上にフェードし (overlay)、別の div がオーバーレイの上をスライドします (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");
                });
          });
      });

スライドオーバーは targetEl の子であるオーバーレイの子であり、子のクリックが親要素に「フォールスルー」することを望まないため、私は stopPropagation を使用します。どんな助けでも大歓迎です！

4

1 に答える 1

0

(targetEL) クリックに基づいてアニメーション化するたびに、新しいイベントをオーバーレイ クリックと #close 要素にバインドします。

それが奇妙に見える理由かもしれません。

これらのバインドは、targetEL クリック トリガーの前に実行します。

于 2012-08-02T21:16:19.633 に答える