javascript - 需要帮助实现jquery指令的排序

Question

问题：我有一个简单的功能，我需要其中的指令一次执行一个。这里是：

showImages = (current_time, exercise) ->
  $('#slideshow img.active').first().fadeOut(500).removeClass('active')
  $('#new-image').addClass('active')

由于最后两行几乎同时发生，id 为“new-image”的图像会淡出。

我希望在下一行开始之前完成处理带有“活动”类的 img 的行。

我做了很多谷歌搜索，但我不知道如何将代码示例应用于这个用例。以下是我找到的一些 Google 文章：

• jQuery：等待函数完成继续处理？
• http://www.sitepoint.com/forums/showthread.php?847638-Script-to-Wait-for-javascript-function-to-end
• 等待函数完成

您的帮助将不胜感激。

Answer 1

使用fadeOut()完整的功能：

$('#slideshow img.active').first().fadeOut(500, function() {
  $(this).removeClass('active');
  $('#new-image').addClass('active');
});

动画完成后，函数内的任何代码complete都会执行

Answer 2

jQuery 的fadeOut()方法有一个完整的回调，可以用作函数：

.fadeOut( [duration ] [, complete ] )

这可以用作：

$(elem).fadeOut(500, function() { ... });

因此，在您的情况下，您可以简单地：

$('#slideshow img.active').first().fadeOut(500, function() {
    $(this).removeClass('active');
    $('#new-image').addClass('active');
});

这样，当前.active元素将失去其类，并在完成后#new-image获得活动类。fadeOut()

Answer 3

试试这个希望这会有所帮助。这是一个快速的jsFiddle

    $('#slideshow img.active').first()
    .fadeOut(500).removeClass('active')
    .setTimeout(function(){
      $('#new-image').addClass('active')
    },100);