2

我从搜索中发现的一些相关问题：

jquery中的'fx'队列如何自动启动？

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);
4

2 回答 2

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 回答
1

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

演示

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

大多数代码都是为了实现漂亮的布局而存在的。操作位是animations对象文字（一堆命名的 css 映射）和附加到边缘控件的匿名单击处理程序（它调用适当的 css 映射以使选定的块移动到要求的位置）。

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

于 2012-06-19T12:15:09.267 回答