На этом шаге мы рассмотрим пример использования метода .animate().
Заметили ли вы при обсуждении составных эффектов, что не для всех методов существуют соответствующие методы переключения? Это действительно так: для методов выдвижения имеется соответствующий метод .slideToggle(), однако нет метода .fadeToggle(), соответствующего методам .fadeIn() и .fadeOut()! Но несмотря на это, мы легко можем реализовать собственную версию метода переключения эффектов проявления и растворения с помощью метода .animate(). Во фрагменте ниже мы заменили строку с вызовом метода .slideToggle() из предыдущего примера своей собственной реализацией анимационного эффекта:
$(document).ready(function() {
var $firstPara = $('p:eq(1)');
$firstPara.hide();
$('a.more').click(function() {
$('p:eq(1)').animate ( {opacity: 'toggle'},'slow');
var $link = $(this);
if ( $link.text() == "Далее" ) {
$link.text('Готово');
} else {
$link.text('Далее');
}
return false;
});
});
Рис.1. Медленное проявление/растворение второго абзаца
Полный текст этого примера можно взять здесь.Этот пример демонстрирует, что метод .animate() позволяет указывать сокращенные формы значений для свойств CSS - 'show', 'hide' и 'toggle', что упрощает реализацию эффектов в случае, когда существующие методы не подходят для решения поставленной задачи.
На следующем шаге мы рассмотрим управление сразу несколькими свойствами.
