我有点击功能
$("#productlink1").click(function() {
$('#productstitle').fadeOut(1000, function(){
$('#productstitle').html('<h4>Corporate Promotions </h4>').fadeIn(1000);
});
$('#productscontent,#flexibility').fadeOut(1000, function(){
$('#corporate').fadeIn(1000);
});
remove();
$(this).addClass('active');
return false;
});
所以,当我点击链接时,标题会淡出,然后新标题会淡入,一切正常
然而第二段代码,淡入淡出是在淡出之前出现的,这一行
$('#productscontent,#flexibility').fadeOut(1000, function(){
$('#corporate').fadeIn(1000);
});
但是,如果我只选择了一个元素,那么它可以正常工作
$('#productscontent').fadeOut(1000, function(){
$('#corporate').fadeIn(1000);
});
多个选择器是否存在问题?
由于
答案 0 :(得分:2)
$('#link').click(function() {
$("#div1, #div2").each(function(){
$(this).fadeOut(1000, function(){
$('#div3').fadeIn(1000);
});
});
})
答案 1 :(得分:1)
来自jQuery .fadeOut()
documentation:
如果动画了多个元素,请务必注意 每个匹配的元素执行一次回调,而不是一次 动画作为一个整体。
答案 2 :(得分:1)
感谢您提出的所有建议,我似乎无法完成上述工作,
基本上当元素被隐藏,它立即消失,对我来说这种“hacky”方式只是增加了延迟
$("#productlink1").click(function() {
$('#productstitle').fadeOut(1000, function(){
$('#productstitle').html('<h4>Corporate Promotions </h4>').fadeIn(1000);
});
$('#productscontent,#flexibility').fadeOut(1000, function(){
$('#corporate').delay(1000).fadeIn(1000);
});
remove();
$(this).addClass('active');
return false;
});
这停止了淡入,直到其他元素消失,这不是我想要修复它但它现在有效。
其他答案同样发生了
已隐藏的元素会淡化第一个
答案 3 :(得分:0)
<强> DEMO 强>
希望您先隐藏元素corporate
$(document).ready(function(){
$("#corporate").hide(); // hiding corporate on document load
$("#productlink1").click(function() {
$('#productstitle').fadeOut(1000, function(){
$('#productstitle').html('<h4>Corporate Promotions </h4>').fadeIn(1000);
});
$('#productscontent,#flexibility').fadeOut(1000, function(){
$('#corporate').fadeIn(1000);
});
remove();
$(this).addClass('active');
return false;
});
});