Question

我在搜索时发现的一些相关问题：

How does the 'fx' queue in jquery auto start?

What are queues in jQuery?

我已经阅读了关于jquery的animate（）的文档，但是我在解决问题时遇到了一些困难。

我要做的是在多个元素上排队一系列动画。我希望动画按顺序动作，也就是说我希望元素上的当前动画能够阻止其自身元素上的动画，但不能阻止其他元素上的动画。

最后，我希望能够取消其中一个元素的动画，但允许其他元素上的动画继续播放。

我认为命名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);

Answer 1

我会在黑暗中拍摄。

您希望将多个动画排队以逐个触发，我们使用callback functions执行此操作。在父事件完成之前，Callback Functions将永远不会运行。在这种情况下，它是动画。

您可以找到代码的工作示例（以下）located here。

代码：

$('.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);
});

希望这会对链接动画产生一些洞察力，并允许你前进，如果没有，让我知道，我会很乐意改变答案，但必要。

Answer 2

如果我理解正确，那你就会不必要地担心。您想要的行为是自然的jQuery动画行为，其中每个元素都有自己的队列，并且没有特别的理由不使用默认的“fx”队列，除非应用程序的其他方面需要它。

DEMO

您将在演示中看到红色和绿色块的位置可以独立控制，并且它们的移动可以独立停止。

大多数代码都存在以实现漂亮的布局。操作位是animations对象文字（一组命名的css映射）和附加到边控件的匿名单击处理程序（它调用相应的css映射以使所选块移动到所需位置）。

您可能想要做的唯一不同的事情是处理非数字动画（例如，类切换）。 jQuery的.animate()只处理数字css值的动画，但好消息是，如果需要，可以毫不费力地处理非数字内容（参见.queue()和.dequeue()）。

＆＃34;命名空间＆＃34; jquery中的动画队列

2 个答案: