Jquery:淡出完成前运行的函数
我的jquery脚本有问题。。。这应该是一个简单的任务,但有一些奇怪的行为,我无法理解 当我点击一个链接时,我希望我的内容消失,然后新内容重新出现。所有内容都存储在标记中 以下是我正在使用的:Jquery:淡出完成前运行的函数,jquery,fadeout,Jquery,Fadeout,我的jquery脚本有问题。。。这应该是一个简单的任务,但有一些奇怪的行为,我无法理解 当我点击一个链接时,我希望我的内容消失,然后新内容重新出现。所有内容都存储在标记中 以下是我正在使用的: $("#events_link").click(function() { $("#content").children(".content").fadeOut(fadetime, function() { $("#events").fadeIn(fadetime); });
$("#events_link").click(function() {
$("#content").children(".content").fadeOut(fadetime, function() {
$("#events").fadeIn(fadetime);
});
return false
});
但是,fadeIn不会等到内容淡出
我的完整页面在这里(所有代码/脚本在一页上):
有什么想法吗?您的页面的当前版本似乎根本不起作用,因为您有
$("#content").children(".content")
而不是
$('#content').children('.content_box')
解决这个问题,将更容易进行故障排除
编辑(现在已完成上述修复):
在回调方面,淡出功能似乎并不像文件中描述的那样工作,至少在Firefox3.5中是这样。我认为您可能希望通过使用一点简单的旧javascript来实现:
$('#content').children('.content_box').fadeOut(fadetime);
window.setTimeout(function () { $('#events').fadeIn(fadetime); }, fadetime + 100);
return false;
我认为,通过努力确保旧内容消失,并且在新内容消失之前不再占用空间,这更有可能实现您想要的。让我们都知道它是否适用于您。这将为每个.content\u box
元素运行…隐藏的元素将立即完成动画,因此您需要的是:
$("#events_link").click(function() {
$("#content > .content_box:visible").fadeOut(fadetime, function() {
$("#events").fadeIn(fadetime);
});
return false
});
重要的更改是,因此只有可见的更改会淡出…并触发回调以显示下一个。windows.setTimeout并不总是有用的,因为有时该过程可能需要比您设置的超时更多的时间。所以,最好在淡出完成后才使用下面的代码运行淡出
$("#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
});*
迈克-你有别的解决办法吗?安德鲁工作。这只是一个临时页面,所以现在就可以了。谢谢非常感谢。你是治疗我一小时头痛的泰诺。