jQuery. Text changes before animation. Incorrect order of effects

Question

It's my first post so let me say Hello! everyone ;)

I have problem with animation. I would like to reach this effect:

1. show text "Lorem ipsum 1" and then animate it to 'opacity: 0'
2. run delay
3. change text to "Lorem ipsum 2" when it is not visible
4. show text using animate to 'opacity: 1'

But my code changes text on a very beginning. So I can't even see "Lorem ipsum 1".

I've tried to add .stop() and .queue() code but also doesn't work correctly(or I didn't use it right way).

I'll be appreciate for advise and explain why code is not execute step by step and how to get it.

$(document).ready(function(){
  $('body').append('<p>Lorem ipsum 1</p>');

  $('p')
    .animate({opacity: '0'}, 'slow')
    .delay(1000)
    .text('Lorem ipsum 2')
    .animate({opacity: '1'}, 'slow');
  });

Answer 1

Use jquery animate callback, to perform the following animation after first animation.

$(document).ready(function(){
$('body').append('<p>Lorem ipsum 1</p>');

$('p')
    .animate({opacity: '0'}, 'slow', function(){
        $(this).text('Lorem ipsum 2')
        .animate({opacity: '1'}, 'slow');
    })        
});

Answer 2

I have meddled with this before, and I found a post which is related to this problem: How to get jQuery to wait until an effect is finished?

you simply put brackets behind your animation part. Code inside gets executed after the animation is done. This is called a callback function.

    $('p').animate({opacity: '0'}, 'slow', function() {
       //and here you put everything that should be executed after the animation
    });

I hope I didn't mess up anything.