jQuery:函数在淡出完成之前运行 [英] Jquery: function running before fadeOut Complete

问题描述

我的jquery脚本有问题...应该是一个简单的任务，但是有一些我无法弄清的奇怪行为.

I'm having an issue with my jquery script... should an easy task, but having some strange behaviours that I can't figure out.

当我单击链接时，我希望我的内容消失，然后重新显示新内容.所有内容都存储在标签中.

When I click on a link, I want my content to disappear, then the new content to reappear. All content is stored in tags.

这是我正在使用的:

$("#events_link").click(function() {
   $("#content").children(".content").fadeOut(fadetime, function() {
      $("#events").fadeIn(fadetime);
   });
   return false
});

但是，fadeIn不会等到内容淡出为止.

However, the fadeIn is not waiting until the content has faded out.

我的整页在这里(一页上的所有代码/脚本):

My full page is here (all code/script on one page):

http://dl.dropbox.com/u/4217965/HorrorInTheHammer /index.html

有什么想法吗?

推荐答案

这将对个元素的每个 运行……隐藏的元素将立即完成其动画，因此您想要的是这个

This will run for each of the .content_box elements...and the hidden ones will finish their animation immediately, so you want is this:

$("#events_link").click(function() {
   $("#content > .content_box:visible").fadeOut(fadetime, function() {
      $("#events").fadeIn(fadetime);
   });
   return false
});

重要的更改是> :visible选择器，因此只有可见的一个褪色了退出...并触发回调以显示下一个.

The important change is the :visible selector, so only the visible one is faded out...and triggers the callback to show the next one.

这篇关于jQuery:函数在淡出完成之前运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！