Question

问题：我有一个简单的功能，我需要一次一个地发出一个指令。这是：

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

由于最后两行几乎同时发生，因此id为'new-image'的图像会逐渐消失。

我希望在下一行开始之前完成处理img并且类'active'的行。

我已经进行了大量的Google搜索，但我不知道如何将代码示例应用于此用例。以下是我发现的一些Google文章：

非常感谢您的帮助。

Answer 1

使用fadeOut()完整功能：

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

动画完成后执行complete函数中的任何代码

Answer 2

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

.fadeOut( [duration ] [, complete ] )

这可以用作：

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

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

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

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

Answer 3

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

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

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

3 个答案: