CODEWITHSUNDEEP
javascriptjquery
Fernando Souza
Fernando Souza

Reputation: 1779

prepend fadeOut transition

I want to make a transition for my prepend() function. Every time an item is prepended inside the #instafeed div, it should fade out first, then prepend, and finally it will fade in. The objective is to make the prepend transition as smooth as possible, so the user can't see the item change until it fades in again.

The problem is that even setting the time, the item change is happening before the fade out.

Wanted: fadeOut ==> prepend ==> fadeIn

What is happening: prepend ==> fadeOut ==> fadeIn 

$(function($){  
    $('.thebutton').click(function(){
        $('#instafeed').fadeOut(3000).prepend($('#instafeed div:last')).fadeIn(3000);
    });

    setInterval( function(){
        $('.thebutton').trigger('click');
    }, 9000);   
});

What should I do?

Upvotes: 1

Views: 260

Answers (3)

gurvinder372
gurvinder372

Reputation: 68413

use callback handlers of fadeout

$('#instafeed').fadeOut(3000, function(){

   $( this ).prepend( $('#instafeed div:last') ).fadeIn(3000);

});

Upvotes: 1

Jai
Jai

Reputation: 74738

should be called in the callback function: 

$('#instafeed').fadeOut(3000, function(){
   $(this).prepend($('#instafeed div:last')).fadeIn(3000);
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337626

You need to do the prepend() and fadeIn() in the callback of the fadeOut() so they are executed when the animation ends. Try this:

$('.thebutton').click(function(){
    $('#instafeed').fadeOut(3000, function() {
        $(this).prepend($('#instafeed div:last')).fadeIn(3000)
    });
});

Upvotes: 3

Related Questions