2

検索から見つけたいくつかの関連する質問:

jqueryの「fx」キューはどのように自動起動しますか?

jQueryのキューとは?

jquery の animate() に関するドキュメントを読みましたが、問題の解決策を見つけるのに苦労しています。

私がやろうとしているのは、複数の要素で一連のアニメーションをキューに入れることです。つまり、要素の現在のアニメーションで、それ自体の要素のアニメーションをブロックし、他の要素のアニメーションをブロックしないようにします。

最後に、要素の 1 つのアニメーションをキャンセルできるようにしたいのですが、他の要素のアニメーションは続行できるようにします。

名前付きのjqueryキューが必要だと思いますが、それを試みるとアニメーションが開始されませんでした（これは、「fx」キューが他のすべてのキューに存在しないという魔法によるものだと思います）。

前もって感謝します！

編集：

ここに私が探しているものがあります：

function someAnimationWrapper(queueName, element, animation) {
    ///<summary>
    /// Places the animation specified into the queue of animations to be
    ///  run on that element.  The animation queue is a named queue so 
    ///  animations in the queue can be stopped at any time.
    ///</summary>
    ///<param name="queueName" type="String">
    /// The name to assign to the element's animation queue.
    ///</param>
    ///<param name="element" type="jQuery">
    /// jQuery object to perform the animations on.
    ///</param>
    ///<param name="animation" type="Object">
    /// Animation properties for the animation call.
    ///</param>

    // TODO: If magic needs to be done here this is a placeholder
    element.animate(animation);
}

function magicallyStopMyQueue(queueName, clearQueue, jumpToEnd) { // May take element, whatever I need to get the job done
    ///<summary>Mirrors jQuery.prototype.stop(), but with the named queue.</summary>
    ///<param name="queueName" type="String">
    /// Animation queue to stop.
    ///</param>
    ///<param name="clearQueue" type="Boolean">
    /// See jQuery.prototype.stop()
    ///</param>
    ///<param name="jumpToEnd" type="Boolean">
    /// See jQuery.prototype.stop()
    ///</param>

    // TODO: some magics here
}

var e1 = $('.myDiv1'),
    e2 = $('.myDiv2');

someAnimationWrapper('firstQueue', e1, { properties: { left: '-=16' }, duration: 100 });
someAnimationWrapper('firstQueue', e1, { properties: { left: '-=16' }, duration: 100 });
someAnimationWrapper('firstQueue', e1, { properties: { left: '-=16' }, duration: 100 });
someAnimationWrapper('secondQueue', e2, { properties: { left: '-=16' }, duration: 100 });
someAnimationWrapper('secondQueue', e2, { properties: { left: '-=16' }, duration: 100 });
someAnimationWrapper('secondQueue', e2, { properties: { left: '-=16' }, duration: 100 });

// Now I want to stop the first one
magicallyStopMyQueue('firstQueue', true, true);
4

2 に答える 2

1

私が正しく理解していれば、あなたは不必要に心配しています。必要な動作は、各要素が独自のキューを持つ自然なjQueryアニメーションの動作であり、アプリケーションの他の側面で必要とされない限り、デフォルトの「fx」キューを使用しない特別な理由はありません。

デモ

デモでは、赤と緑のブロックの位置を個別に制御でき、それらの移動を個別に停止できることがわかります。

ほとんどのコードは、優れたレイアウトを実現するために存在します。有効なビットは、animationsオブジェクトリテラル（名前付きcssマップの束）とエッジコントロールに接続された匿名クリックハンドラー（適切なcssマップを呼び出して、選択したブロックを要求された位置に移動させる）です。

別の方法で実行したいのは、数値以外のアニメーション（クラススイッチなど）を処理することだけです。jQuery.animate()は数値のcss値のアニメーションのみを処理しますが、良いニュースは、必要に応じて非数値のものをそれほど問題なく処理できることです（.queue（）および.dequeue（）を参照）。

于 2012-06-19T12:15:09.267 に答える
1

ここは真っ暗闇で撮ってみます。

複数のアニメーションを順番に実行するためにキューに入れたい場合は、これを使用callback functionsします。Callback Functions親イベントが終了するまで実行されません。この場合はアニメーションです。

ここにあるコードの実際の例 (従うべき) を見つけることができます。

コード：

$('.a').animate({
  //This fires immediately
  left:"+=50px"     
}, function(){
  /* 
   *Reference name for Example:
   *cb1
   */
  //This fires once the above has been completed.
  //we also don't want the animation to fire on some eleents.
  $('.a').animate({
    left:"-=50px"
  }, function(){
    $('.b').animate({
      /* 
       *Reference name for Example:
       *cb2
       */
      //even though we stop it below AND clearQueue..
      //this will still run in the callback.
      left:"-=75px"
    });              
  });
  //This will only stop the initial callback function (@ cb1)
  //The function in the callback (@cb2) will fire once it has completed.
  $('.b').stop(true);
});

うまくいけば、これによりアニメーションの連鎖に関する洞察が得られ、前進できるようになります。そうでない場合は、お知らせください。必要に応じて答えを変更させていただきます。

于 2012-06-18T05:19:26.080 に答える