使用 fadeOut 将 div 数量加倍
我遇到 fadeOut() 问题。如果我使用 fadeOut()，我的
这是不起作用的行（单击后，它给我两个
div.fadeOut().empty().append(content).fadeIn('fast', function(){
和有效的（但我希望有 fadeOut ）：
div.empty().append...
以及整个代码：
$(document).ready(function(){
var loader = $('#loading');
var div = $("#provisoire");
div.append($(".content:first").html()).css({'display':'block'});
$(".plus").click(function(){
var name = $(this).attr("rel");
changeContent(name);
return false;
});
function changeContent(name){
var content = (name)?$("#"+name).html():$(".content:first").html();
loader.fadeIn();
$('html,body').animate({'scrollTop':0}, 600, function(){
div.empty().append(content).fadeIn('fast', function(){ //*** here
loader.fadeOut();
if(name){
div.find('.childB').append('<a href="#" style="background:green;" class="retour">Retour</div>');
div.find('.retour').click(function(){
changeContent();
return false;
});
}
else {
$(".plus").click(function(){
var name = $(this).attr("rel");
changeContent(name);
return false;
});
}
});
});
}
});
I have a problem with a fadeOut(). My <div>'s are multiplied by two if I use the fadeOut(), but if I just make the <div>'s appear directly (with no fade on the <div>'s), there's no problem. Do you know what I could do for that?
Here's the line that does not work (after a click, it gives me two <div>'s instead of one, then if I click again four <div>'s appear, etc.)
div.fadeOut().empty().append(content).fadeIn('fast', function(){
and the one that works (but I'd like to have the fadeOut though):
div.empty().append...
and the entire code:
$(document).ready(function(){
var loader = $('#loading');
var div = $("#provisoire");
div.append($(".content:first").html()).css({'display':'block'});
$(".plus").click(function(){
var name = $(this).attr("rel");
changeContent(name);
return false;
});
function changeContent(name){
var content = (name)?$("#"+name).html():$(".content:first").html();
loader.fadeIn();
$('html,body').animate({'scrollTop':0}, 600, function(){
div.empty().append(content).fadeIn('fast', function(){ //*** here
loader.fadeOut();
if(name){
div.find('.childB').append('<a href="#" style="background:green;" class="retour">Retour</div>');
div.find('.retour').click(function(){
changeContent();
return false;
});
}
else {
$(".plus").click(function(){
var name = $(this).attr("rel");
changeContent(name);
return false;
});
}
});
});
}
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用 Tentonaxe 的解决方案，尝试在以下行中使用 html 或 body：
我认为同时定义 html 和 body 可能会调用回调函数两次。
With Tentonaxe's solution, try using either html or body on the following line:
I think having both html and body defined might call the callback function twice.
尝试使用 fadeOut 的回调函数来清空并附加内容，这样在完成淡出之前不会清空并附加内容：
编辑：此外，您的主要问题是使用
.live( 绑定到 .plus 类'click')并且只执行一次，最好是在$(document).ready()之外，但这需要一些重新安排。try using the callback function of the fadeOut to empty and append content that way it isn't emptied and appended before it is done fading out:
Edit: Also, your primary problem, bind to the .plus class using
.live('click')and only do it once, preferably outside of the$(document).ready(), however that would take some rearranging.