Небольшая собственная анимация

[abr_question]

Хочу организовать следующую анимацию: блок span должен медленно стать прозрачным, но не убратся со страницы, чтобы не нарушилась разметка, затем в нём должен поменятся текст, и затем блок опять должен медленно появится.
Пишу такой код:

$("#my_client_text").animate({opacity:'0.0'}, 500);
$("#my_client_text").html('Закрепить');
$("#my_client_image").attr('src', 'images/lock.png');
$("#my_client_text").animate({opacity:'1.0'}, 500);

либо такой:

$("#my_client_text").fadeOut('fast');
$("#my_client_text").html('Закрепить');
$("#my_client_image").attr('src', 'images/lock.png');
$("#my_client_text").fadeIn('fast');

my_client_text - сам span-блок
my_client_image - img-тег рядом с my_client_text
В обоих случаях фактически получается, что текст меняется сразу, только потом начинается затухание и появление. Будто .animate(), .html() и .attr() начинают выполнятся одновременно.
Что я не так делаю?

[Azazaza]

попробуйте так

$("#my_client_text").animate({opacity:'0.0'}, 500);
$("#my_client_text").delay(500).html('Закрепить');
$("#my_client_image").delay(500).attr('src', 'images/lock.png');
$("#my_client_text").animate({opacity:'1.0'}, 500);

[Azazaza]

а еще можно назначить запуск функции по завершению анимации, например:

$('#my_client_text').animate({
    opacity: 0.0
  }, 500, function() {
    $("#my_client_text").html('Закрепить');
    $("#my_client_image").attr('src', 'images/lock.png');
  });

[abr_question]

Во! Второй вариант подошёл, спасибо!
А первый тоже не работает.. Получается, что jQuery как-то по потокам выполнение разбивает?

[Azazaza]

все выполняется по порядку и практически моментально, для нас, вобщем, одновременно)) ну а анимации и все такое, если относятся к одному и тому же элементу, выстраиваются в очередь, хотя и их если что останавливают с помошью .stop()
както так, сам тут новенький