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

来自文档

如果多个元素是动画的，那么需要注意的是，回调是每个匹配的元素执行一次，而不是对整个动画执行一次。

Answer 2

谢谢你的建议，我似乎没办法让上面的东西起作用，

从本质上说，由于元素是隐藏的，它马上就消失了，这对我来说是一种“黑客”的方式，只是增加了一个延迟。

$("#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 3

演示

希望您一开始就隐藏了元素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;
    });
    });