Crossfade Два divs Использование jQuery

Question

У меня есть многоэтапная веб-форма на веб-сайте. Когда человек щелкает дальше, div один исчезает, когда div два исчезает. Проблема, которую я вижу, заключается в том, что div one исчезает, когда div two исчезает ниже div one, а затем прыгает после того, как div один исчезает.

Как предотвратить это и на самом деле перекреститься?

HTML

<div class="step-1"> 
    <!-- CODE --> 
</div > 

<div class="step-2"> 
    <!-- THIS DIV IS HIDDEN TO BEGIN WITH --> 
</div > 

JS

$(".step-1-next").on("click", function() { 
    $(".step-1").fadeOut("slow"); 
    $(".step-2").fadeIn("slow"); 
    return false; 
}); 

Answer 1

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

$(".step-1-next").on("click", function() { 
    $(".step-1").fadeOut("slow", function(){ 
     $(".step-2").fadeIn("slow"); 
     }); 
    }); 

Это приведет к тому, что функция fade начнет ждать, пока ее не погаснет.

Answer 2

Рабочий пример http://jsfiddle.net/JUMJY/

Причина step-2 ДИВ прыгает в step-1 положение когда S tep-1 полностью скрыта, из-за расположения. Или ее отсутствие. Для этого вам нужно будет использовать либо position absolute, либо position fixed. Я использовал абсолютный в примере, который я создал для вас.

.step-1 { 
    background: blue; 
    top: 20px; 
    left: 20px; 

} 

.step-2 { 
    background: red; 
    display: none; 
    top: 130px; 
    left: 20px; 
} 

div { 
    width: 100px; 
    height: 100px; 
    margin: 20px; 
    position: absolute; 
} 

button { 
    position: absolute; 
    right: 50px; 
    top: 0; 
}