2

我的 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

有什么想法吗？

4

3 回答 3

9

这将为每个元素运行......隐藏的.content_box元素将立即完成动画，所以你想要的是：

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

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

于 2010-08-24T17:52:37.430 回答
5

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
});*
于 2013-01-03T09:58:52.347 回答
-2

您页面的当前版本似乎根本无法正常工作，因为您有类似的东西

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

代替

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

修复它，故障排除会更容易......

编辑（现在上面的修复已经完成）：

就回调而言，至少在 Firefox 3.5 中，fadeOut 函数似乎并没有像记录的那样工作。我认为您可能想要的可以通过使用一些简单的 javascript 来完成：

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

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

于 2010-08-24T17:21:17.473 回答