jQuery中的通用动画队列？

Question

我试图创建这种滑动效果，但我遇到的唯一问题是排队。

$(this).animate({'left' : '0%'}, randTime, function() { 
    $(this).animate({'boxShadow' : 'none'}); 
    setTimeout(function() { 
     $container.children('.slice').addClass('noshadow'); 
     $('body > div:not(#'+container+') .slice').each(function() { 
      restartAnimation($(this)); 
     });    
    $container.children('.content').fadeIn(); 
    }, (aLength+100)); 
}); 

上面的容器变量是当前容器。我做了：没有（容器），所以当前的容器将继续动画。这全部在一个包含两个属性的函数中，即容器元素的ID和动画将运行的方式（仅关键字贯穿if语句）。然后，我将有激活这样的动画菜单：

if($(this).attr('name') == 'home') { 

    animation('home', 'top'); 

} 
else if { ..... 

重启动画功能只需重新启动所有其他的动画元素到原来的位置，使他们能够再次运行。现在，问题是，直到重新启动功能运行才会有延迟，所以如果在延迟时间内单击两个菜单项，最终重新启动功能运行，然后一切都变得非常困惑。

我需要一种方法将动画重新启动回原来的位置，以便它可以再次运行，但不会干扰并重新启动其他动画元素。否则，我们会陷入一片混乱。我已经建立了一个快速jsFiddle，所以你可以尝试一下效果。这段代码现在有点乱，我计划在完成后整理一切，但这个排队问题真的让我陷入了困境。 http://jsfiddle.net/qe7dj/

Answer 1

解决此问题的一种方法是在第一个动画完成之前不允许另一个动画启动。

可能有几种方法可以做到这一点，但想到的是创建一个全局函数队列对象（我将给出一个解释和下面的代码）。

您需要一个全局变量来跟踪当前有多少幻灯片正在动画。

var animationsRunning = 0; 

每当幻灯片动画开始时，增加上述变量。当幻灯片动画结束时，将其递减。

现在，在开始整个新动画（多个幻灯片）之前，请检查该变量。如果幻灯片正在动画，请将动画功能添加到全局函数队列中。如果没有，请继续并像正常一样运行动画。

if ($(this).attr('name') == 'home') { 
    if (animationsRunning < 1) { 
     animation('home', 'top'); 
    } 
    else { 
     funqueue.push(wrapFunction(animation, this, ['home', 'top'])); 
    } 
} 
else if ($(this).attr('name') == 'about') { 
    if (animationsRunning < 1) { 
     animation('about', 'left'); 
    } 
    else { 
     funqueue.push(wrapFunction(animation, this, ['about', 'left'])); 
    } 
} 

else if ($(this).attr('name') == 'services') { 
    if (animationsRunning < 1) { 
     animation('services', 'hslide'); 
    } 
    else { 
     funqueue.push(wrapFunction(animation, this, ['services', 'hslide'])); 
    } 
} 

每当所有幻灯片完成动画，检查全局函数队列中是否有任何项目。如果有，执行第一个。

if (animationsRunning < 1 && funqueue.length > 0) { 
    (funqueue.shift())(); 
} 

有关功能队列中的代码如下所示：

// Function wrapping code. 
// fn - reference to function. 
// context - what you want "this" to be. 
// params - array of parameters to pass to function. 
var wrapFunction = function(fn, context, params) { 
    return function() { 
     fn.apply(context, params); 
    }; 
}; 

// Global function queue 
var funqueue = []; 

的Stack Overflow question here具有全局函数队列概念的一个很好的解释，所以我不会详细解释一下这里。

可以找到一个可用的jsfiddle示例here。

编辑：

您可能需要防止的等待动画的堆积 - 如果是这样的话你根本就加入了最新的项目之前清除功能的队列。很明显，在这种情况下你实际上并不需要队列，但是我已经将它保留下来以便与第一个解决方案兼容。

更新的jsFiddle位于here。