0

定期的にアニメーション化される要素のアニメーション停止を検出し、関数をトリガーする必要があるシナリオがあります。要素のアニメーションを制御できません。アニメーションは動的になる可能性があるため、賢いは使用できませんsetTimeout。

長い話

問題の簡略化された形式は、難読化された JavaScript を使用してバナーをスライドインおよびスライドアウトするサードパーティの jQueryスライド バナー プラグインを使用していることです。slideCompleteある種のイベントのフックを見つける必要がありますが、私が持っているのは要素だけidです。この jsfiddleを例として、javascript が難読化されていると想像してください。赤いボックスが極端に達して停止したときに関数をトリガーする必要があります。

私は:animated疑似セレクターを認識していますが、必要な要素を常にポーリングする必要があると思います。私はthis、this、およびthisを経験しましたが、役に立ちません。jquery promiseを確認しましたが、このシナリオでそれを使用することがわかりませんでした。この SO の質問は私の要件に最も近いものですが、回答がありません。

PS役立つかもしれないいくつかの詳細情報：

  1. この要素は JavaScript によって作成されるのではなく、ページの読み込み時に存在します。
  2. 要素にプラグインをいつ適用するか (バナーを定期的にスライドさせる) を制御できます
4

2 に答える 2

1

私が使用したスライドショー プラグインのほとんどは、アニメーションの最後でクラスを変更するために使用されます... jQuery の「addClass」メソッドを拡張して、使用するプラグインが次のようなメソッドを使用している限り、クラスの変更をキャプチャできるようにすることができます。そうすべき：

(function($){

$.each(["addClass","removeClass"],function(i,methodname){
      var oldmethod = $.fn[methodname];
      $.fn[methodname] = function(){
            oldmethod.apply( this, arguments );
            this.trigger(methodname+"change");
            return this;
      }
   });
})(jQuery);

ここでフィドルをまとめました

難読化されたコードでも、このメソッドを使用して、アニメーション化する引数をどのように送信しているかを確認し (通常、アニメーション化する引数を送信するときに「オプション」オブジェクトを使用します)、トリガーする匿名関数でコールバック関数をラップできるはずです。イベント... このフィドルのように

関連するスクリプトのブロックは次のとおりです。

(function($){
$.each(["animate"],function(i,methodname){
      var oldmethod = $.fn[methodname];
      $.fn[methodname] = function(){
          var args=arguments;
          that=this;
          var oldcall=args[2];
          args[2]=function(){
              oldcall();
              console.log("slideFinish");
          }
          oldmethod.apply( this, args );

          return this;
      }
    });
})(jQuery);
于 2013-05-08T22:20:20.563 に答える
0

どのような種類のアニメーションが行われているかについて何の指示も与えなかったので、これは水平/垂直の変換であると仮定しますが、これは他の効果にも適用できると思います. アニメーションがどのように完成されているか分からないので、setIntervalこれをどのように行うかを推測できる唯一の方法は評価です。

var prevPos = 0;
var isAnimating = setInterval(function(){
    if($(YOUROBJECT).css('top') == prevPos){
        //logic here
    }
    else{
        prevPos = $(YOUROBJECT).css('top');
    }
},500);

これにより、オブジェクトの垂直位置が 0.5 秒ごとに評価され、現在の垂直位置が 0.5 秒前の位置と同じである場合、アニメーションが停止したと見なされ、コードを実行できるようになります。

編集 -

jsfiddle に水平方向の翻訳があることに気付いたので、jsfiddle のコードはここにありますhttp://jsfiddle.net/wZbNA/3/

于 2013-05-08T22:17:57.340 に答える