На этом шаге мы рассмотрим еще один способ изменения порядка выполнения эффектов.
И последнее замечание, касающееся поочередного воспроизведения эффектов для одного набора элементов: очередность выполнения не соблюдается автоматически для других методов, не являющихся методами воспроизведения эффектов, таких как .css(). Предположим, что необходимо изменить цвет фона элемента <div id="switcher"> на красный после воспроизведения эффекта .slideUp(), но перед эффектом .slideDown(). Мы могли бы попытаться реализовать это так, как показано ниже:
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.fadeTo('fast',0.5)
.animate({
'left': paraWidth - switcherWidth
}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow')
.css('backgroundColor', '#f00')
.slideDown('slow');
});
});
Рис.1. Изменение порядка выполнения эффектов
Полный текст этого примера можно взять здесь.Однако даже хотя программный код, изменяющий цвет фона, помещен в требуемое место в цепочке, цвет изменяется сразу после щелчка мышью.
На следующем шаге мы закончим изучение этого вопроса.
