Синхронность выполнения анимации и append
Суть такова.
Есть HTML: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="test.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="full_view"> Goodbye world! </div> <a href="#" class="rel">Change</a> </body></html> Есть скртип:
$(document).ready(function() {
$("a.rel").bind("click", function() {
$("#full_view").fadeOut(1000);
$("#full_view").append("Hello world!");
$("#full_view").fadeIn(1000);
return false;});
});
По идее при клике на ссылку с class="rel" div с id full_view сначала медленно исчезнет, потом в него добавится Hello world!, а потом только он появится. На деле всё не так - Hello world добавляется сразу после нажатия, а потом уже с ним идёт исчезновение и появление. Как так? Пробовал уже и в fadeOut приписывать callback функцию и в ней добавлять текст, а потом проявлять - то же самое получается. |
Анимация асинхронная вещь.
Цитата:
|
Ну ладно, допустим. А как тогда заставить работать асинхронно?
|
а если просто по таймауту (window.setTimeout()) рисовть Hello world?
Если не ошибаюсь, временные величины у вас все заданы. |
Это, конечно, вариант, но какой то корявый.
Хотелось бы чтоб всё изящно было и просто, без всяких таймаутов и прочего. Но видимо придётся с ним делать. |
Цитата:
Ничего, быстро привыкаешь - на JS периодически приходится пользоваться timeout'ом. =) |
А что некрасивого в timeout?
|
Цитата:
|
Ясно всё. Всем спасибо за оперативность и помощь!
|
Цитата:
jQuery.setTimeout = setTimeout;Такой timeout рулит обычного как тузик грелку :) |
Я бы посоветовал использовать метод animate()
$("#full_view").animate({opacity: 0},1000,function(){ $(this).append("Hello world!") })
.animate({opacity: 1},1000);
|
| Часовой пояс GMT +3, время: 16:05. |