javascript - "Namespaced"jquery中的动画队列

Question

我通过搜索发现的一些相关问题:

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

What are queues in jQuery?

我已经阅读了 jquery animate() 的文档，但在找出问题的解决方案时遇到了一些困难。

我想做的是在多个元素上排列一系列动画。我希望动画按顺序 Action ，也就是说，我希望元素上的当前动画阻止其自己元素上的动画，但不阻止其他元素上的动画。

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

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

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

DEMO

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

大部分代码都是为了实现漂亮的布局而存在的。操作位是动画对象文字(一堆命名的 css 映射)和附加到边缘控件的匿名单击处理程序(调用适当的 css 映射以使所选 block 移动到所需的位置)位置)。

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