jquery - jquery多个选择器，淡入淡出

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

从jQuery.fadeOut()文档：

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

Answer 2

http://jsfiddle.net/XgtVw/

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

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

演示

希望你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;
    });
    });