I have a multi-step webform on a website. When a person clicks next the div one fades out as div two fades in. The problem I am seeing is while div one fades out div two fades in below div one and then jumps once div one fades out.

How do I prevent this and have them actually crossfade?

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

I have a multi-step webform on a website. When a person clicks next the div one fades out as div two fades in. The problem I am seeing is while div one fades out div two fades in below div one and then jumps once div one fades out.

How do I prevent this and have them actually crossfade?

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

• javascript
• jquery
• html
• cross-fade

• @snowburnt - You should repost your answer. Your answer works and looks better than the other. – L84 Commented Feb 9, 2014 at 1:17
• Done, the other post was pretty nice, if you adjust his fiddle so both the tops are the same one will fadeOut at the same time as the other and they will occupy the same space. Mine will force the second one to wait for the callback from the fadeOut before the fadeIn is called. – Snowburnt Commented Feb 9, 2014 at 3:13
• @Snowburnt - Agreed but it caused problems in my case, though I am unsure why. Your solution works well, even with the pause. – L84 Commented Feb 9, 2014 at 3:20

2 Answers 2

Try this:

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

This will cause the fade in to wait to be called until the fade out is pleted.

Working example http://jsfiddle/JUMJY/

The reason the step-2 div is jumping into the step-1 position once step-1 is fully hidden, is because of the positioning. Or lack thereof. To do this, you would have to use either position absolute, or position fixed. I used absolute in the example I created for you.

.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;
}