需要帮助实现jquery指令的排序 [英] Need help implementing the sequencing of jquery instructions

查看:204
本文介绍了需要帮助实现jquery指令的排序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问题:我有一个简单的功能,我需要它里面的指令,一次一个。这是:

The problem: I have a simple function and I need the instructions within it to take place one at a time. Here it is:

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

由于最后两行几乎同时发生,id'new-image' 。

Since the last 2 lines happen almost simultaneously, the image with id 'new-image' gets faded out.

我想在下一行执行之前完成处理img的行active。

I would like the line processing the img with the class 'active' to be completed before the next line kicks in.

我已经做了很多Google搜索,但我不知道如何将代码示例应用于此用例。以下是我发现的一些Google文章:

I have done lots of Google searching but I don't know how to apply the code examples to this use case. Here are some Google articles I found:

  • jQuery: wait for function to complete to continue processing?
  • http://www.sitepoint.com/forums/showthread.php?847638-Script-to-Wait-for-javascript-function-to-end
  • waiting a function to complete

赞赏。

推荐答案

jQuery的 fadeOut()方法具有可以用作函数的完成回调:

jQuery's fadeOut() method has a complete callback which can be used as a function:


.fadeOut([duration] [,complete])

这可以用作:

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

因此,在您的情况下,您可以简单地:

Therefore, in your case you can simply:

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

这样,当前 .active 将失去其类,并且 fadeOut()之后#new-image $ c>已完成。

With this, the currently .active element will lose its class and the #new-image will gain the active class after the fadeOut() has finished.

这篇关于需要帮助实现jquery指令的排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆