Хочу организовать следующую анимацию: блок 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() начинают выполнятся одновременно.
Что я не так делаю?