Jquery Fadein() And Fadeout() Without Delay

Please see the attached JSFiddle. Div1 (red) fades out to show div2 (blue). It all works fine. But there is a small time in between div1 fading out and div2 fading in when its all

Solution 1:

Do you mean you want one to blend into the other. You can use position:absolute. Here is my example http://jsfiddle.net/pgrillot/ywbgdgyL/

Solution 2:

Here's one way to do what you're after. Fade out the first div and then after a short delay, fade in the second. Position them so that they sit on top of each other by using abolsute positioning:

$('#div1').fadeIn();
setTimeout(function () {
    $('#div1').fadeOut(600)
    setTimeout(function () {
        $('#div2').fadeToggle(600);
    }, 300);
}, 4000);

jsFiddle example

Solution 3:

is it this what you want to achive ?

JSFIDDLE

$('#div1').fadeIn();

setTimeout(function(){
    $('#div1').fadeToggle(600);
    $('#div2').fadeToggle(600);
},4000);

and css

#div1{
    height:100px;
    width:100px;
    background-color:red;
    display:none;
    position:absolute;
}

if you want them div's overlayed use position:absolute or relative may you add them to a container for better positioning.

you can also keep it going have a look at this

ANOTHER FIDDLE

Solution 4:

If you want the blue div to appear without delay, then remove the time delay (duration) from your fadeToggle method for div2 (blue div)

$('#div1').fadeIn();

setTimeout(function(){
    $('#div1').fadeToggle(600,function() {
       $('#div2').fadeToggle(0);
    });
},4000);

Here is the solution - http://jsfiddle.net/nauy9zsg/1/

Solution 5:

Your issue falls with both div's not being able to be in a "fade state" at the same time. Otherwise one will appear below the other. The white that you're seeing is the initiation of the second div's fade, other wise you'd have something that looked like the two divs stacked for a split second. What are you attempting to use this for, there might be a better way to approach the way its being handled to allow a more smooth process.