Jquery:在fadeOut Complete之前运行的函数

Question

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

当我点击链接时,我希望我的内容消失,然后重新出现新内容.所有内容都存储在标签中.

这是我正在使用的:

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

但是,fadeIn不会等到内容淡出.

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

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

有什么想法吗？

Answer 1

这将运行每个中的.content_box元素...和隐藏的人会立即完成他们的动画,所以你想是这样的:

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

重要的变化是:visible选择器,所以只有可见的一个被淡出...并触发回调以显示下一个.

Answer 2

windows.setTimeout并不总是有用,因为有时进程可能比您设置的超时花费更多时间.因此,最好在fadeOut完成后使用以下代码运行fadeIn.

$("#events_link").click(function() {
   $.when(
      // Your function which you want to finish first
      // $("#content").children(".content").fadeOut(fadetime)
   ).done(function() {
      // The function which you want to run after finishing the previous function
      // $("#events").fadeIn(fadetime);
   });
   return false
});*