CODEWITHSUNDEEP
jquery
AKor
AKor

Reputation: 8892

jQuery fadeOut & fadeIn not working properly

I have the following code:

$('#oldLoginProblem').fadeOut();
$('#newLoginProblem').fadeOut();
$('#newLoginProblem').fadeIn();

It runs each time I press a button.

In the beginning, it'll look like this:

foobar

But when I press my button and run that code, it looks like this:

foobar

foobar2

The first element doesn't disappear, it remains. The second element just shows up below, as if I have a simple .show(). Also, there is no fading occurring in any way. How can I solve this?

Upvotes: 0

Views: 353

Answers (1)

Justin Niessner
Justin Niessner

Reputation: 245479

If you want your animations to happen in a sequence, you need to trigger them using callbacks (otherwise they will all trigger at once and look like a mess):

$('#oldLoginProblem').fadeOut('slow', function(){
    $('#newLoginProblem').fadeOut('slow', function(){
        $('#newLoginProblem').fadeIn('slow');
    });
});

It also looks like you might have a bad ID somewhere in your markup (since the first piece of content isn't fading out) but it's impossible to tell without an example of your markup.

Upvotes: 1

Related Questions