Crossfade Two divs Using jQuery

Question

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

@snowburnt - You should repost your answer. Your answer works and looks better than the other. — L84, Feb 09 '14 at 01: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, Feb 09 '14 at 03:13
@Snowburnt - Agreed but it caused problems in my case, though I am unsure why. Your solution works well, even with the pause. — L84, Feb 09 '14 at 03:20

Snowburnt · Accepted Answer · 2014-02-09T01:47:26.617

6

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.

edited Feb 09 '14 at 01:47

answered Feb 09 '14 at 01:02

Snowburnt

6,523
7
30
43

6

This is good to know, but it isn't a crossfade; it's just fading one element out, and then fading one element in. – Brian Snow Mar 23 '15 at 23:38
I never thought the crossfade looked right when done simultaneously – Snowburnt Mar 25 '15 at 03:24

score 2 · Answer 2 · answered Feb 09 '14 at 01:03

2

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

answered Feb 09 '14 at 01:03

CRABOLO

8,605
39
41
68

When the divs are position `left: 0; top: 0;` it caused strange behavior and it still jumped some. – L84 Feb 09 '14 at 01:29
@Lynda make sure you have `position: absolute;` , also if you have any margin or padding, that could possibly affect it. – CRABOLO Feb 09 '14 at 01:31
I did have `position: absolute;`. Unsure what the issue is. – L84 Feb 09 '14 at 03:19
Nice, but this is not a cross faide – Debbie Kurth Nov 18 '21 at 23:45

Crossfade Two divs Using jQuery

2 Answers2