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

}); 

... и т.д. классы «дизайн», «web- дизайн "и" фотография "содержат изображения. Моя проблема в том, что когда макет страницы заново, переход очень изменчив. Когда классы исчезли, нет плавного перехода для макета страницы до того, как последуют следующие классы.

Есть ли способ с jquery преодолеть это и иметь плавные переходы макета страницы?

Заранее спасибо.

Answer 1

Одна вещь, которую вы хотите сделать, - подождать, пока fadeOut не будет завершен, прежде чем пытаться fadeIn. Как и сейчас, ваши fadeOut и fadeIn конкурируют, что вызывает измельчение.

Попробуйте это ...

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