jquery .fadeOut和.fadeIn平滑页面布局过渡

Question

点击catagory选择器时，我有一些简单的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

你要做的一件事就是等到fadeOut完成后才尝试淡入淡出。就像现在一样，你的fadeOut和fadeIn正在竞争，这会导致你的印章。

试试这个......

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