CODEWITHSUNDEEP
javascriptjqueryhtmlcross-fade
L84
L84

Reputation: 46318

Crossfade Two divs Using jQuery

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

Upvotes: 3

Views: 10631

Answers (2)

Snowburnt
Snowburnt

Reputation: 6932

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 completed.

Upvotes: 6

CRABOLO
CRABOLO

Reputation: 8793

Working example http://jsfiddle.net/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;
}

Upvotes: 2

Related Questions