Эффекты jQuery
jQuery может создавать такие эффекты, как скрытие, отображение, переключение, скольжение и пользовательские анимации.
Попробуйте сами
Попробуйте этот эффект jQuery:
CodeW3C.com - ведущий сайт по веб-технологиям
На CodeW3C.com вы можете найти все необходимые вам руководства по созданию веб-сайтов.
Нажмите здесь
Пример
- jQuery hide()
- Демонстрация простого функции jQuery hide().
- jQuery hide()
- Другой демонстрации hide(). Как скрыть часть текста.
- jQuery slideToggle()
- Демонстрация простого эффекта slide panel.
- jQuery fadeTo()
- Демонстрация простого функции jQuery fadeTo().
- jQuery animate()
- Демонстрация простого функции jQuery animate().
Скрытие и отображение jQuery
Через функции hide() и show() jQuery поддерживает скрытие и отображение HTML элементов:
Пример
$\("#hide\").click(function(){
$\("p\").hide();
});
$\("#show\").click(function(){
$\("p\").show();
});
Функции hide() и show() могут иметь два опциональных параметра: speed и callback.
Синтаксис:
$\$(selector).hide(speed,callback) $\$(selector).show(speed,callback)
speed Параметр определяет скорость отображения или скрытия. Эти значения могут быть установлены: "slow", "fast", "normal" или миллисекунды.
callback Параметр - это имя функции, которая выполняется после завершения hide или show функции. Вы узнаете больше о callback Знания параметров.
Пример
$("button").click(function(){
$\("p\").hide(1000);
});
Переключение jQuery
Функция toggle() jQuery использует функции show() или hide() для переключения видимости HTML элементов.
Скрыть видимые элементы и показать скрытые элементы.
Синтаксис:
$\$(selector).toggle(speed,callback)
speed Параметр может принимать следующие значения: "slow", "fast", "normal" или миллисекунды.
Пример
$("button").click(function(){
$\("p\").toggle();
});
callback Параметр - это имя функции, которая выполняется после завершения работы функции. Вы узнаете больше о них в следующих разделах этого руководства callback Знания параметров.
Функции скольжения jQuery - slideDown, slideUp, slideToggle
jQuery имеет следующие функции скольжения:
$\$(selector).slideDown(speed,callback) $\$(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
speed Параметр может принимать следующие значения: "slow", "fast", "normal" или миллисекунды.
callback Параметр - это имя функции, которая выполняется после завершения работы функции. Вы узнаете больше о них в следующих разделах этого руководства callback Знания параметров.
Пример slideDown()
$(".flip").click(function(){
$(".panel").slideDown();
});
Пример slideUp()
$(".flip").click(function(){
$(".panel").slideUp();
}
Пример slideToggle()
$(".flip").click(function(){
$(".panel").slideToggle();
});
Функции fade jQuery - fadeIn(), fadeOut(), fadeTo()
jQuery имеет следующие fade функции:
$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)
speed Параметр может принимать следующие значения: "slow", "fast", "normal" или миллисекунды.
В функции fadeTo() opacity Параметр определяет уменьшение до заданной степени непрозрачности.
callback Параметр - это имя функции, которая выполняется после завершения работы функции. Вы узнаете больше о них в следующих разделах этого руководства callback Знания параметров.
Пример fadeTo()
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
Пример fadeOut()
$("button").click(function(){
$("div").fadeOut(4000);
});
Пользовательская анимация jQuery
Синтаксис функции jQuery для создания пользовательской анимации:
$(selector).animate({params},[duration],[easing],[callback])
Ключевыми параметрами являются paramsОно определяет CSS-свойства, используемые для анимации. Можно одновременно установить несколько таких свойств:
$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
Второй параметр это durationОно определяет время, применяемое к анимации. Значение, которое оно устанавливает: "slow", "fast", "normal" или миллисекунды.
Пример 1
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
Пример 2
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
HTML элементы по умолчанию имеют статическую позицию и не могут быть перемещены.
Чтобы элемент мог двигаться, установите CSS position в relative или absolute.
jQuery эффекты - из этой страницы
| Функция | Описание |
|---|---|
| $(selector).hide() | Скрытие выбранного элемента |
| $(selector).show() | Показ выбранного элемента |
| $(selector).toggle() | Переключение между скрытием и показом выбранного элемента |
| $(selector).slideDown() | Показ выбранного элемента скроллингом вниз |
| $(selector).slideUp() | Скрытие выбранного элемента скроллингом вверх |
| $(selector).slideToggle() | Переключение между скроллингом向上 и向下 для выбранного элемента |
| $(selector).fadeIn() | Увеличение прозрачности выбранного элемента |
| $(selector).fadeOut() | Уменьшение прозрачности выбранного элемента |
| $(selector).fadeTo() | Снижение прозрачности выбранного элемента до заданного значения |
| $(selector).animate() | Внедрение пользовательских анимаций для выбранных элементов |
Для получения полной версии руководства посетите наш Руководство по эффектам jQuery.
