Question

我有点击功能

$("#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);
                });

多个选择器是否存在问题？

由于

Answer 1

http://jsfiddle.net/XgtVw/

 $('#link').click(function() {
  $("#div1, #div2").each(function(){
    $(this).fadeOut(1000, function(){
        $('#div3').fadeIn(1000);
    });
}); 
})

Answer 2

来自jQuery .fadeOut() documentation：

如果动画了多个元素，请务必注意每个匹配的元素执行一次回调，而不是一次动画作为一个整体。

Answer 3

感谢您提出的所有建议，我似乎无法完成上述工作，

基本上当元素被隐藏，它立即消失，对我来说这种“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;
});

这停止了淡入，直到其他元素消失，这不是我想要修复它但它现在有效。

其他答案同样发生了

已隐藏的元素会淡化第一个

Answer 4

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

jquery多个选择器，淡入淡出

4 个答案: