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 selector，所以只有可见的变化才会消失......并触发回调以显示下一个。

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
});*

Answer 3

您网页的当前版本似乎根本不起作用，因为您有类似

的内容

$("#content").children(".content")

而不是

$('#content').children('.content_box')

修复此问题，以便更轻松地排除故障......

编辑（现在已完成上述修复）：

看起来fadeOut函数在回调方面似乎没有像文档中那样工作，至少在Firefox 3.5中是这样。我想你可能想要的东西可以通过使用一个简单的javascript来实现：

$('#content').children('.content_box').fadeOut(fadetime);
window.setTimeout(function () { $('#events').fadeIn(fadetime); }, fadetime + 100);
return false;

我认为通过尝试确保旧内容消失并且在淡入新内容之前不再占用空间更有可能实现您的目标。让我们都知道它是否适合你。

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

3 个答案: