Question

I am having issues with the jQuery div to div append on first load of a page.

Desired effect:
Essentially, just needs to have current div fade out, pause, then next one fade in.

Result:
Newly appended div jumps to top of div to be appended to, forcing the previous div down and looking unsightly. Almost as if the div is being faded in before the previous one has finished fading out, despite the .delay() function.

The original jQuery code:

$(document).ready(function(){
$("#blurb > div:gt(0)").hide();
setInterval(function() { 
$('#blurb > div:first')
.fadeOut(1000)
.delay(1000)
.next(1)
.fadeIn(1000)
.end(1)
.appendTo('#blurb');
},  5000);
});

Relevant CSS:

#blurb{
float:right;
text-align:right;
width:300px;
font-size:16px;
margin-right:-20px;
height:100px;
z-index:-100;
}
#blurb > div{
position:relative;
z-index:-100;
height:100px;
}

Relevant HTML:

<div id="blurb">
<div>
<b style="font-size:18px;color:#EF116A;">Having problems?</b><br>
Please call our Sheffield-based support team on <b>0114 303 3232</b>.
</div>
<div>
<b style="font-size:18px;color:#EF116A;">Having problems?</b><br>
Please email our Sheffield-based support team at <b>[e-mail]</b>.
</div>
<script>
jQuery script as above
</script>
</div>

(please ignore non-validation, etc, this is just an experiment)

Many thanks,

Oliver

Answer 1

You need to handle the fade in of the nextdiv in the callback callback function of the fadeOut method if you want the next div to be faded in after the current animation is completed.

    $(document).ready(function() {
    $("#blurb > div:gt(0)").hide();
    setInterval(function() {
        $('#blurb >div:first')
            .fadeOut(1000 , function() {
                 $(this).next(1).delay(1000).fadeIn(1000)
                                .end(1).appendTo('#blurb');
            })  
    }, 5000);
});

​

Check Fiddle