Базовые эффекты

Веб-программирование --- jQuery --- Базовые эффекты

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

Большая часть функциональности пользовательского интерфейса, связанной с jQuery, содержится в библиотеке jQuery UI, но в ядро библиотеки все же включены некоторые простые эффекты и средства анимации. Несмотря на то что я назвал их простыми, с их помощью можно реализовать довольно сложные эффекты. Эти средства предназначены в основном для анимация видимости элементов, однако их можно использовать также для анимации ряда CSS-свойств самыми разными способами.

Назначением большинства базовых эффектов является простое отображение или сокрытие элементов. Методы, используемые для этой цели, описаны в таблице ниже:

Пример использования методов show() и hide() без аргументов для создания простейших эффектов приведен ниже:

$(function() {
        
    $("<button>Скрыть</button><button>Показать</button>").appendTo("#buttonDiv")
        .click(function(e) {
           if ($(e.target).text() == "Скрыть") {
               $('#row1 div.dcell').hide();
           } else {
               $('#row1 div.dcell').show();
           }
           e.preventDefault();
        });
	
});

Запустить пример

В этом сценарии посредством DOM-манипуляций создаются две кнопки (элементы button) и предоставляется функция, которая должна вызываться после щелчка на любой из этих кнопок. Данная функция определяет с помощью метода text(), на какой из кнопок был выполнен щелчок, и в зависимости от этого вызывает либо метод show(), либо метод hide().

В обоих случаях указанная функция вызывается как метод объекта jQuery, созданного с помощью селектора #row1 div.cell. Таким образом, невидимыми или видимыми будут становиться те объекты div, принадлежащие классу dcell, которые являются потомками элемента с атрибутом id, равным row1.

В данном случае переход элементов из одного состояния в другое выполняется немедленно, без анимации. Он не сопровождается какими-либо задержками или эффектами, и все элементы появляются или исчезают сразу же после щелчка. Вызов метода hide() для элементов, которые уже сделаны невидимыми, равно как и вызов метода show() для элементов, которые уже сделаны видимыми, не дает никакого эффекта. Наконец, обратите внимание, что при сокрытии или отображении элемента одновременно с ним скрываются или отображаются все его потомки.

Переключение видимости элементов

Для перевода элементов из видимого состояния в невидимое и наоборот используется метод toggle(). Соответствующий пример приведен ниже:

$(function() {
        
    $("<button>Переключить</button>").appendTo("#buttonDiv")
        .click(function(e) {
           $('div.dcell:first-child').toggle();
           e.preventDefault();
        });
	
});

Запустить пример

В этом примере мы добавляем в документ единственную кнопку, после щелчка на которой вызывается метод toggle(), изменяющий видимость тех элементов div.dcell, которые являются первыми дочерними элементами своих родителей.

Обратите внимание на сворачивание структуры документа в окрестности скрытых элементов. Если вы хотите скрыть элементы таким образом, чтобы область, которую они занимали, отображалась на странице, установите для CSS-свойства visibility значение hidden.

Одностороннее переключение видимости элементов

Передача методу toggle() логического (булевого) значения позволяет налагать ограничения на возможные направления изменения состояния видимости элементов. Если в качестве аргумента методу toggle() передается значение true, то это приведет лишь к отображению скрытых элементов (при этом видимые элементы скрываться не будут). Передача значения false обеспечивает противоположный эффект: видимые элементы скрываются, но скрытые элементы не становятся видимыми.

Должен признаться, я не вижу в этом средстве большой пользы, и включил его в рассмотрение исключительно ради полноты изложения.

Анимация видимости элементов

Процесс отображения и сокрытия элементов можно анимировать, передавая методу show(), hide() или toggle() параметр, задающий длительность анимации. В этом случае процесс сокрытия или отображения элементов будет осуществляться плавно на протяжении указанного периода. Возможные варианты задания продолжительности периода анимации перечислены в таблице ниже:

Пример анимации отображения и сокрытия элементов приведен ниже. В этом примере для задания длительности анимационного перехода мы используем строковый параметр fast, с помощью которого указываем, что на переключение видимости элементов img в документе отводится 600 мс:

$(function() {
        
    $("<button>Переключить</button>").appendTo("#buttonDiv")
        .click(function(e) {
           $('img').toggle('fast', 'linear');
           e.preventDefault();
        });
	
});

Запустить пример

Указывая длительность периода анимации в миллисекундах, не заключайте значение в кавычки. Например, следует использовать запись $('img').toggle(500), а не $('img').toggle('500'). При наличии кавычек указанное значение будет проигнорировано, и вместо него будет использовано внутреннее значение, установленное по умолчанию.

Вызывая в этом сценарии метод toggle(), мы также передаем ему дополнительный аргумент, называемый функцией смягчения (easing function) или стилем смягчения (easing style), с помощью которого задаем требуемый стиль анимации.

Под смягчением здесь понимается смягчение анимационного перехода путем регулирования его скорости в процессе анимации. Доступны два предустановленных стиля смягчения: swing и linear. Стилю swing соответствует медленное начало анимации с последующим ее ускорением и повторным замедлением в конце анимации. Стилю linear соответствует постоянная скорость анимации на протяжении всего процесса. Если этот аргумент опущен, то по умолчанию используется значение swing.

Использование функций обратного вызова в эффектах

Методам show(), hide() и toggle() можно передавать в качестве аргумента функцию, которая будет вызвана по окончании анимации. Эту возможность можно использовать для обновления состояния других элементов, чтобы отразить изменения в их состоянии, как показано в примере ниже:

$(function() {
        
    var hiddenRow = "#row2";
    var visibleRow = "#row1";
    
    $(hiddenRow).hide();
    
    $("<button>Поменять</button>").insertAfter("#buttonDiv button")
        .click(function(e) {        
            hideVisibleElement();
            e.preventDefault();
        });
        
    function hideVisibleElement() {
        $(visibleRow).hide("fast", showHiddenElement);
    }
        
    function showHiddenElement() {
        $(hiddenRow).show("fast", switchRowVariables);
    }
    
    function switchRowVariables() {
        var temp = hiddenRow;
        hiddenRow = visibleRow;
        visibleRow = temp;
    }
	
});

Запустить пример

Чтобы сделать этот пример более понятным, функциональность эффекта была распределена между несколькими отдельными функциями. Сначала мы скрываем один из элементов div, который служит рядом таблицы элементов в макете страницы, созданном с помощью стилей CSS, и определяем две переменные, с помощью которых отслеживаем, какой именно из рядов является видимым, а какой — невидимым.

Далее в документ добавляется кнопка (элемент button), после щелчка на которой вызывается функция hideVisibleElement(), использующая метод hide() для анимации сокрытия видимого ряда элементов. При этом мы указываем имя функции, которая должна быть вызвана по завершении эффекта, в данном случае — showHiddenElement.

В этой функции для анимации восстановления видимости элементов используется метод show(). И вновь мы указываем здесь функцию, которая должна быть вызвана по завершении эффекта. В данном случае ею является функция switchRowVariables(), отслеживающая видимость элементов, что позволяет применить анимацию к нужным элементам при выполнении следующего щелчка на кнопке.

Теперь при щелчке на кнопке вместо текущего ряда отобразится скрытый ряд, причем анимация выполняется быстро, чтобы длительный переход страницы из одного состояния в другое не раздражал пользователя.

Процесс перехода осуществляется плавно, причем никаких помех со стороны табличной компоновки CSS не наблюдается, поскольку воздействию подвергаются не индивидуальные ячейки, а ряды таблицы в целом. Обычно необходимости в разбиении эффекта на отдельные функции, как это было сделано в данном примере, не возникает. В примере ниже представлен этот же пример, преобразованный к более компактному виду за счет использования набора встроенных функций:

$(function() {
        
    var hiddenRow = "#row2";
    var visibleRow = "#row1";
    
    $(hiddenRow).hide();
    
    $("<button>Поменять</button>").insertAfter("#buttonDiv button")
                .click(function(e) {                
                    $(visibleRow).hide("fast", function() {
                        $(hiddenRow).show("fast", function() {
                            var temp = hiddenRow;
                            hiddenRow = visibleRow;
                            visibleRow = temp;
                        });
                    });
					
					e.preventDefault();
                });
	
});

Эффекты плавного изменения высоты элементов

В библиотеке jQuery имеется ряд методов, предназначенных для создания эффектов плавного раскрытия и свертывания элементов путем изменения их высоты (так называемые эффекты скольжения). Эти методы приведены в таблице ниже:

Эти методы анимируют размеры элементов по вертикали. Они принимают те же аргументы, что и методы базовых эффектов. Вы можете передавать им в качестве аргументов длительность эффекта, стиль смягчения и функцию обратного вызова, самостоятельно выбирая тот вариант вызова, который вам подходит. Соответствующий пример представлен в примере ниже:

$(function() {
    
    $("<button>Свернуть развернуть</button>").insertAfter("#buttonDiv button")
                .click(function(e) {                
                    $('h1').slideToggle("fast");					
					e.preventDefault();
                });
	
});

Запустить пример

В этом примере метод slideToggle() используется для создания эффекта попеременного появления и исчезновения элемента h1 путем изменения его высоты.

Эффекты плавного изменения прозрачности элементов

В этом разделе рассматриваются методы, предназначенные для создания эффектов "растворения" элементов, которые используются для отображения и сокрытия элементов путем изменения их непрозрачности (или, если вам так больше нравится, путем изменения их прозрачности). Эти методы приведены в таблице ниже:

Наборы параметров, используемых в методах fadeIn(), fadeOut() и fadeToggle(), аналогичны наборам параметров, используемых в других методах, создающих эффекты. При вызове этих методов им можно передавать такие параметры, как длительность анимации, стиль анимации и функция обратного вызова, как это было продемонстрировано в предыдущих примерах.

Пример использования эффектов прозрачности приведен ниже:

$(function() {
    
    $("<button>Переключить</button>").insertAfter("#buttonDiv button")
                .click(function(e) {                
                    $('img').fadeToggle();					
					e.preventDefault();
                });
	
});

Запустить пример

Метод fadeToggle() применен здесь к элементам img частично для демонстрации ограничений этого эффекта. В отличие от других эффектов, которые изменяют также размер выбранных элементов, эффект прозрачности затрагивает лишь параметр непрозрачности. Это означает, что методы fade() обеспечивают плавную анимацию лишь до тех пор, пока элементы не станут полностью прозрачными, после чего jQuery скрывает их, и компоновка страницы изменяется скачкообразно. В некоторых ситуациях такое поведение страницы может раздражать пользователей.

Анимация прозрачности до определенного значения

Для создания анимации, которая прекращается в тот момент, когда параметр непрозрачности достигает определенного значения, используется метод fadeTo(). Параметр непрозрачности может принимать значения в интервале от 0 (полная прозрачность) до 1 (полная непрозрачность). При этом свойство видимости элементов не изменяется, что позволяет избежать скачкообразного изменения компоновки страницы, о котором говорилось выше.

Пример использования метода fadeTo() приведен ниже:

$(function() {
    
    $("<button>Растворить картинки</button>").insertAfter("#buttonDiv button")
                .click(function(e) {                
                    $('img').fadeTo("fast", 0);					
					e.preventDefault();
                });
	
});

Запустить пример

В этом примере мы указали, что непрозрачность элементов должна уменьшаться до тех пор, пока они не станут полностью прозрачными. Производимый эффект в данном случае оказывается тем же, что и при использовании метода fadeOut(), однако по завершении анимационного перехода элементы не скрываются.

Уменьшать непрозрачность до нуля вовсе необязательно. Для этого параметра можно указать любое другое значение в пределах допустимого интервала (0 - 1).