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 ```

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

Accepted Answer

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.

Crossfade Two divs Using jQuery

Solution

Problem