Posted by: fxix on: Сентябрь 18, 2008
1 show(). Возвращает: jQuery. Отображает все элементы набора, если они были скрыты через вызов hide() или через display:none в стилях. Действует подобно show(speed,[callback]), только без анимационных эффектов. Если элемент не был скрыт, то ничего не происходит.
$(«p»).show(); Показываем все параграфы, которые были скрыты.
2 show(speed, [callback]). Возвращает: jQuery. Отображает все элементы набора с использованием анимационных эффектов. В аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Высота, ширина и прозрачность каждого элемента может быть изменена динамически, с определенной скоростью.
- Показываем все скрытые параграфы, в качестве параметра ключевое слово slow. При этом анимация выполняется в течение 600 миллисекунд.
XHTML————————————-
<button>Показать</button>
<p>asdasdasd</p>
<head>
<script>
$(document).ready(function(){
$(«button»).click(function () {
$(«p»).show(«slow»);
});
});
</script>
</head>
без кнопки:
$(«p»).show(«slow»);
- Показываем все скрытые элементы div по порядку, используя ключевое слово fast. Каждая анимация занимает 200 миллисекунд и по завершении очередной стартует следующая.
XHTML————————————-
<button id=»showr»>Show</button>
<button id=»hidr»>Hide</button>
<div>Hello,</div>
<div>how</div>
<div>are</div>
<div>you?</div>
CSS————————————-
div {display:none;}
<script>
$(document).ready(function(){
$(«#showr»).click(function () {
$(«div:eq(0)»).show(«fast», function () {
// use callee so don’t have to name the function
$(this).next().show(«fast», arguments.callee);
});
});
$(«#hidr»).click(function () {
$(«div»).hide(2000);
});
});
</script>
speed – строка или число. Если передается строка, она может принимать предопределенные значения – «slow», «normal» или «fast». Число – длительность эффекта в миллисекундах, например 1000.
callback – функция, вызываемая по завершении эффекта. Выполняется один раз для каждого элемента набора
3 hide(). Возвращает: jQuery. Скрывает все элементы набора, если они отображались. Действует подобно hide(speed, [callback]), но без анимационных эффектов. Если элемент был скрыт – ничего не происходит. Пример: один параграф скрыт изначально, второй – скрывается кликом по ссылке.
XHTML————————————-
<p>Привет!</p>
<a href=»#»>Кликнуть здесь чтобы скрыть ссылку</a>
<p>Здесь еще один параграф</p>
<script>
$(document).ready(function(){
$(«p»).hide();
$(«a»).click(function () {
$(this).hide();
return false;
});
});
</script>
4 hide(speed, [callback]). Возвращает: jQuery. Скрывает все элементы набора с использованием анимационных эффектов. В аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Высота, ширина и прозрачность каждого элемента набора может быть изменена динамически, с определенной скоростью.
- Скрываем все видимые параграфы. Используем в качестве параметра ключевое слово slow. При этом анимация выполняется в течение 600 миллисекунд.
XHTML————————————-
<button>Скрываем…</button>
<p>Вот тут написан</p>
<p>очень интересный тект, правда?</p>
<script>
$(document).ready(function(){
$(«button»).click(function () {
$(«p»).hide(«slow»);
});
});
</script>
- Кликом по кнопке Hide, скрываем все элементы span по порядку, используя ключевое слово fast. Каждая анимация занимает 200 миллисекунд и по завершении очередной стартует следующая.
XHTML————————————-
<button id=»hidr»>Hide</button>
<button id=»showr»>Show</button>
<div>
<span>В</span> <span>стародавние</span> <span>времена</span>
<span>жили</span> <span>да</span> <span>были</span>
<span>три</span> <span>программиста…</span>
</div>
<script>
$(document).ready(function(){
$(«#hidr»).click(function () {
$(«span:last-child»).hide(«fast», function () {
// use callee so don’t have to name the function
$(this).prev().hide(«fast», arguments.callee);
});
});
$(«#showr»).click(function () {
$(«span»).show(2000);
});
});
</script>
- Скрываем элементы div по клику на них в течение 2 секунд и когда элемент уже скрыт, удаляем его.
XHTML————————————-
<div></div>
CSS————————————-
div { background:#ece0fb; width:30px;
height:40px; margin:2px;}
<script>
$(document).ready(function(){
for (var i = 0; i < 5; i++) {
$(«<div>»).appendTo(document.body);
}
$(«div»).click(function () {
$(this).hide(2000, function () {
$(this).remove();
});
});
});
</script>
speed – строка или число. Если передается строка, она может принимать предопределенные значения – «slow», «normal» или «fast». Число – длительность эффекта в миллисекундах, например 1000.
callback – функция, вызываемая по завершении эффекта. Выполняется один раз для каждого элемента набора.
5 toggle(). Возвращает: jQuery. toggle – переключатель. Переключает отображение всех элементов набора. Если они были скрыты – отображает их и наоборот. Переключаем параграфы с помощью кнопки:
XHTML————————————-
<button>Переключать…</button>
<p>Привет-привет…</p>
<p style=»display: none»>Пока-пока…</p>
<script>
$(document).ready(function(){
$(«button»).click(function () {
$(«p»).toggle();
});
});
</script>
6 slideDown(speed, [callback]). Возвращает: jQuery. slide – раздвижение Открывает все элементы набора, используя изменение высоты элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации.
Открываем все элементы input, используя эффект «скольжения вниз». Время анимации 1000 мс. Как только анимация выполнена – вызывается функция, которая изменяет некоторые css-свойства элементов input. А в особенности среднего элемента, которому передается фокус:
XHTML————————————-
<div>Нажать!</div>
<input type=»text» />
<input type=»text» class=»middle» />
<input type=»text» />
input { display:none;}
$(document).ready(function(){
$(«div»).click(function () {
$(this).css({ borderStyle:»inset», cursor:»wait» });
$(«input»).slideDown(1000,function(){
$(this).css(«border», «2px red inset»)
.filter(«.middle»)
.css(«background», «yellow»)
.focus();
$(«div»).css(«visibility», «hidden»);
});
});
});
Открываем, «скользя вниз», все элементы div. Для задания времени используем ключевое слово «slow», т.е. открываем медленно:
XHTML————————————-
Кликай тут!
<div></div>
<div></div>
<div></div>
$(document).ready(function(){
$(document.body).click(function () {
if ($(«div:first»).is(«:hidden»)) {
$(«div»).slideDown(«slow»);
} else {
$(«div»).hide();
}
});
});
slideDown принимает те же аргументы, что и show или hide.
7 slideUp(speed, [callback]). Возвращает: jQuery. Скрывает все элементы набора, используя изменение высоты элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации.
Скрываем все input-поля, используя эффект «скольжения вверх». Время анимации 2000 мс. Как только анимация выполнена – вызывается функция, которая покажет сообщение о том, какое именно поле было скрыто.
XHTML————————————-
<div>
<button>Скрыть первый</button>
<input type=»text» value=»One» />
</div>
<div>
<button>Скрыть второй</button>
<input type=»text» value=»Two» />
</div>
<div>
<button>Скрыть третий</button>
<input type=»text» value=»Three» />
</div>
<div id=»msg»></div>
$(document).ready(function(){
$(«button»).click(function () {
$(this).parent().slideUp(«slow», function () {
$(«#msg»).text($(«button», this).text() + » – сделано!»);
});
});
});
Скрываем, «скользя вверх», все элементы div. Время не задаем. По умолчанию эффект будет выполнен примерно за 400 мс.
XHTML————————————-
Кликай здесь!
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
$(document).ready(function(){
$(document.body).click(function () {
if ($(«div:first»).is(«:hidden»)) {
$(«div»).show(«slow»);
} else {
$(«div»).slideUp();
}
});
});
slideUp принимает те же аргументы, что и show или hide.
8 slideToggle(speed, [callback]). Возвращает: jQuery. Подходит для меню. Переключает видимость всех элементов набора, используя изменение высоты элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Скрываем и отображаем все параграфы:
XHTML————————————-
<button>Переключатель</button>
<p>
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</p>
$(document).ready(function(){
$(«button»).click(function () {
$(«p»).slideToggle(«slow»);
});
});
</script>
slideToggle принимает те же аргументы, что и show или hide.
9 fadeIn(speed, [callback]). Возвращает: jQuery. fade – исчезание, затухание. Делает видимыми все элементы набора, используя изменение прозрачности элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому «проявляемый» элемент уже должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.
«Проявляем» скрытые элементы div один за другим, каждый раз анимационный эффект занимает время примерно в 600 мс.
XHTML————————————-
<span>Кликать тут…</span>
<div id=»one»></div>
<div id=»two»></div>
<div id=»three»></div>
div { display:none;}
$(document).ready(function(){
$(document.body).click(function () {
$(«div:hidden:first»).fadeIn(«slow»);
});
});
«Проявляем» красный блок поверх текста. По завершении этой анимации запускается следующий эффект, который «проявляет» тэг span.
XHTML————————————-
<p>
Let it bethe allegations
for factual correctness… (<a href=»#»>click!</a>)
<div><span>CENSORED!</span></div>
</p>
span { display:none; }
div { display:none; }
$(document).ready(function(){
$(«a»).click(function () {
$(«div»).fadeIn(3000, function () {
$(«span»).fadeIn(100);
});
return false;
});
});
fadeIn принимает те же аргументы, что и show или hide.
10 fadeOut(speed, [callback]). Возвращает: jQuery. Делает невидимыми все элементы набора, используя изменение прозрачности элементов (эффект «затухания»). Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому скрываемый элемент должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.
Скрываем все параграфы, используя эффект «затухания». Продолжительность эффекта примерно 600 мс:
XHTML————————————-
<p>Если Вы кликните на этом параграфе, Вы увидите, как он будет скрыт с использованием эффекта «затухания».</p>
$(document).ready(function(){
$(«p»).click(function () {
$(«p»).fadeOut(«slow»);
});
});
Проведите мышью над текстом. Кликните там, где при наведении курсора появится желтый бэкграунд. Это один из нескольких элементов span. По клику на нем он будет скрыт с использованием эффекта «затухания».
XHTML————————————-
<h3>Find the modifiers – <div></div></h3>
<p>
If you <span>really</span> want to go outside
<span>in the cold</span> then make sure to wear
your <span>warm</span> jacket given to you by
your <span>favorite</span> teacher.
</p>
span.hilite { background:yellow; }
div { display:inline; color:red; }
$(document).ready(function(){
$(«span»).click(function () {
$(this).fadeOut(1000, function () {
$(«div»).text(«‘» + $(this).text() + «‘ has faded!»);
$(this).remove();
});
});
$(«span»).hover(function () {
$(this).addClass(«hilite»);
}, function () {
$(this).removeClass(«hilite»);
});
});
fadeOut принимает те же аргументы, что и show или hide.
11 fadeTo(speed, opacity, [callback]). Возвращает: jQuery. Делает невидимыми все элементы набора, используя изменение прозрачности элементов (эффект «затухания») до величины, указанной во втором аргументе. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому скрываемый элемент должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.
Кликом на первом параграфе изменяем его прозрачность до 0.33. Эффект длится примерно 600 мс. Второй параграф не меняет прозрачность.
XHTML————————————-
<p>
Click this paragraph to see it fade.
</p>
<p>
Compare to this one that won’t fade.
</p>
$(document).ready(function(){
$(«p:first»).click(function () {
$(this).fadeTo(«slow», 0.33);
});
});
Меняем прозрачность элементов div случайным образом. Длительность эффекта примерно 200 мс.
XHTML————————————-
<p>And this is the library that John built…</p>
<div id=»one»></div>
<div id=»two»></div>
<div id=»three»></div>
$(document).ready(function(){
$(«div»).click(function () {
$(this).fadeTo(«fast», Math.random());
});
});
fadeTo принимает те же аргументы, что и show или hide. И кроме того второй аргумент opacity – число от 0 до 1, характеризующий «целевую» прозрачность элемента.
12 animate(params, [duration], [easing], [callback]). Возвращает: jQuery. Это функция для построения своей, пользовательской анимации. У этой функции один обязательный аргумент, представляющий собой объект состоящий из пар ключ/значение. В качестве ключа выступает CSS-свойство, которое должно быть анимировано (например: «height», «top», or «opacity»). Свойства должны быть определены с использованием camel case (т.е. например marginLeft вместо margin-left). В качестве значения выступает «целевое» значение соответствующего CSS-свойства. Например, если в качестве значения выступает какая-либо цифра, то соответвующее свойство будет трансформировано из своего текущего состояния, в новое состояние. Поддерживаются только свойства, имеющие в качестве значения какие-либо числа (или «hide», «show», «toggle»). Например backgroundColor не поддерживается. Можно определять значения свойств, используя «em» или %. Также можно использовать «относительную» анимацию, т.е. определять значения соответствующего свойства относительно его текущей позиции (используя «+=» или «-=») чтобы передвигать элемент в положительную или отрицательную стороны.
XHTML————————————-
<button id=»go»>» Погнали…</button>
<div id=»block»>Привет однако!</div>
$(document).ready(function(){
$(«#go»).click(function(){
$(«#block»).animate({
width: «70%»,
opacity: 0.4,
marginLeft: «0.6in»,
fontSize: «3em»,
borderWidth: «10px»
}, 1500 );
});
});
Пример «относительной» анимации. Покликайте несколько раз по кнопкам вправо/влево.
XHTML————————————-
<button id=»left»>«</button>
<button id=»right»>»</button>
<div class=»block»></div>
div {position:absolute;}
$(document).ready(function(){
$(«#right»).click(function(){
$(«.block»).animate({«left»: «+=50px»}, «slow»);
});
$(«#left»).click(function(){
$(«.block»).animate({«left»: «-=50px»}, «slow»);
});
});
Аргументы, принимаемые этой функцией:
params – набор атрибутов стилей, которые Вы хотите анимировать.
duration (Optional) – строка, представляющая собой ключевое слово («slow», «normal», или «fast») или число, указываюее длительность эффекта в миллисекундах.
easing (Optional) – строка, представляющая собой имя эффекта плагина easing. Имеет два встроенных значения «linear» и «swing». Используется только с плагином.
callback (Optional) – функция, которая может быть вызвана по завершении анимации каждого элемента набора
easing – ослабление
duration – продолжительность
13 animate(params, options). Возвращает: jQuery. Это функция для построения своей, пользовательской анимации. Аргумент params представляет собой объект, состоящий из пар ключ/значение. В качестве ключа выступает CSS-свойство, которое должно быть анимировано (например: «height», «top», или «opacity»). Свойства должны быть определены с использованием camel case (т.е. например marginLeft вместо margin-left). В качестве значения выступает «целевое» значение соответствующего CSS-свойства. Например, если в качестве значения выступает какая-либо цифра, то соответствующее свойство будет трансформировано из своего текущего состояния, в новое состояние. Или же если значение представлено в виде строки («hide», «show», или «toggle»), анимация для этого свойства будет создана со значениями по умолчанию.
Отдельно стоит поговорить об аргументе options. В нем также может быть передана длительность соответствующего эффекта анимации (как с использованием числовых значений в миллисекундах, так и с помощью ключевых слов). Также может быть использовано имя эффекта при использовании плагина easing. С помощью опции complete может быть вызвана функция, которая будет выполнена по завершении анимации для каждого элемента набора.
Обязательно надо упомянуть о queue. Он принимает значения true (по умолчанию) или false. Если установить queue:false, это даст возможность выполнить анимационный эффект вне очереди, параллельно со следующим эффектом (если такой есть конечно).
$(«#go1″).click(function(){
$(«#block1″).animate( { width:»90%» },
{ queue:false, duration:3000 } )
.animate( { fontSize:»24px» }, 1500 )
.animate( { borderRightWidth:»15px» }, 1500);
});
$(«#go2″).click(function(){
$(«#block2″).animate( { width:»90%»}, 1000 )
.animate( { fontSize:»24px» } , 1000 )
.animate( { borderLeftWidth:»15px» }, 1000);
});
$(«#go3″).click(function(){
$(«#go1″).add(«#go2″).click();
});
$(«#go4″).click(function(){
$(«div»).css({width:»", fontSize:»", borderWidth:»"});
});
14 stop(). Возвращает: jQuery. Останавливает все выполняющиеся анимационные эффекты для всех элементов набора. Кликните по кнопке Go, чтобы запустить анимацию. Затем по кнопке Stop, чтобы ее остановить. Ну а клик по кнопке Back запустит другой анимационный эффект – блок будет двигаться в обратную сторону. Заметьте, что отсчет будет вестить от той позиции в которой блок был остановлен.
// Запускаем анимацию
$(«#go»).click(function(){
$(«.block»).animate({left: ‘+=100px’}, 2000);
});
// Останавливаем анимацию
$(«#stop»).click(function(){
$(«.block»).stop();
});
// Запускаем в другом направлении
$(«#back»).click(function(){
$(«.block»).animate({left: ‘-=100px’}, 2000);
});
15 queue(). Возвращает: Array. Возвращает ссылку на очередь элемента (массив функций). По клику на кнопке мы получаем длину очереди в текущий момент.
$(document).ready(function(){
$(«#show»).click(function () {
var n = $(«div»).queue(«fx»);
$(«span»).text(«Длина очереди: » + n.length);
});
function runIt() {
$(«div»).show(«slow»);
$(«div»).animate({left:’+=200′},2000);
$(«div»).slideToggle(1000);
$(«div»).slideToggle(«fast»);
$(«div»).animate({left:’-=200′},1500);
$(«div»).hide(«slow»);
$(«div»).show(1200);
$(«div»).slideUp(«normal», runIt);
}
runIt();
});
16 queue(callback). Возвращает: jQuery. Добавляет новую функцию, которая долна быть выполнена, в конец очереди для всех элементов набора. В примере: очередь пользовательских функций.
$(document.body).click(function () {
$(«div»).show(«slow»);
$(«div»).animate({left:’+=200′},2000);
$(«div»).queue(function () {
$(this).addClass(«newcolor»);
$(this).dequeue();
});
$(«div»).animate({left:’-=200′},500);
$(«div»).queue(function () {
$(this).removeClass(«newcolor»);
$(this).dequeue();
});
$(«div»).slideUp();
});
17 queue(queue). Возвращает: jQuery. Заменяет очередь для всех элементов набора новой очередью (массив функций). В примере, по клику на кнопке Stop, устанавливается массив очереди, чтобы удалить текущую очередь. По клику на кнопке Start очередь запускается вновь.
$(«#start»).click(function () {
$(«div»).show(«slow»);
$(«div»).animate({left:’+=200′},5000);
$(«div»).queue(function () {
$(this).addClass(«newcolor»);
$(this).dequeue();
});
$(«div»).animate({left:’-=200′},1500);
$(«div»).queue(function () {
$(this).removeClass(«newcolor»);
$(this).dequeue();
});
$(«div»).slideUp();
});
$(«#stop»).click(function () {
$(«div»).queue(«fx», []);
$(«div»).stop();
});
18 dequeue(). Возвращает jQuery.Удаляет поставленную в конец очереди функцию, разрешая очереди продолжаться. В примере dequeue используется, чтобы разрешить очереди продолжиться после использования queue(callback). Попробуйте убрать в примере строчку $(this).dequeue(); и Вы обнаружите, что анимация остановится после срабатывания toggleClass.
$(«button»).click(function () {
$(«div»).animate({left:’+=200px’}, 2000);
$(«div»).animate({top:’0px’}, 600);
$(«div»).queue(function () {
$(this).toggleClass(«red»);
$(this).dequeue();
});
$(«div»).animate({left:’10px’, top:’30px’}, 700);
});
В общем про анимационные эффекты библиотеки jQuery вроде бы все.
