jquery .fadeOut和.fadeIn平滑页面布局转换

Question

我有一些简单的jquery，用于在单击分类选择器时显示图像(小片段)

$(".graphic-design-selector").click(function(){
    $(".web-design, .photography").fadeOut(1000);
    $(".design").fadeIn(1000);

});

$(".photography-selector").click(function(){
    $(".web-design, .design").fadeOut(1000);
    $(".photography").fadeIn(1000);

});

..。类“设计”、“网页设计”和“摄影”都包含图像。我的问题是，当页面布局调整时，转换确实是起伏不定的。当类淡出时，在下一个类淡入之前，页面布局不会平滑过渡。

有没有办法用jquery来克服这个问题并实现平滑的页面布局转换？

提前谢谢。

Answer 1

您需要做的一件事是在尝试fadeIn之前等待fadeOut完成。就像现在一样，你的fadeOut和fadeIn正在竞争，这导致了你的砍头。

试试这个。

$(".graphic-design-selector").click(function(){
    $(".web-design, .photography").fadeOut(1000, function() {        
        $(".design").fadeIn(1000);
    });
});