Инспектор
Вы можете этот курс.
Опубликован: 28.02.2016 | Уровень: для всех | Доступ: платный
Лекция 5:
Анимация
Библиотека jQuery позволяет очень легко анимировать DOM элементы, для этого предусмотрено несколько функций, но обо всём по порядку, начнём с простого "hide()" и "show()", эти два метода соответственно скрывают либо отображают элементы:
// скроем все картинки
$('img').hide();
// теперь вернём их на место
$('img').show();Данные вызовы оперируют лишь CSS атрибутом "display" и переключают его из текущего состояния в none и обратно. В качестве первого параметра можно задать скорость анимации, для этого можно использовать одно из зарезервированных слов "slow" или "fast", либо же указывать скорость в миллисекундах (1000 мс = 1 сек):
// медленно спускаемся с горы и… скрываем все картинки
// slow == 600
// fast == 200
$('img').hide('slow');
// теперь вернём их на место, чуть быстрее
$('img').show(400);В таком случае, исчезновение элементов будет сопровождаться анимацией атрибутов "width", "height", "opacity" и прочих. Смотрите пример:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Пример анимации с использованием методов Hide/Show/Toggle</title>
<link rel="profile" href="http://gmpg.org/xfn/11"/>
<link rel="shortcut icon" href="http://anton.shevchuk.name/favicon.ico"/>
<link rel="stylesheet" href="css/styles.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/code.js"></script>
</head>
<body>
<div id="content" class="wrapper box">
<menu label="Try...">
<a href="index.html" title="go prev" class="button alignleft" rel="prev">← Back </a>
<a href="index.html" title="back to Index" class="button alignleft" rel="index">Index §</a>
<a href="#" title="reload" class="button alignleft" onclick="window.location.reload();return false">Reload ¤</a>
<a href="slide.html" title="go next" class="button alignright" rel="next">Next →</a>
<hr/>
<pre><code contenteditable="true">$(<span>'article img'</span>).hide()</code></pre>
<button type="button" class="code">Run Code</button>
<pre><code contenteditable="true">$(<span>'article img'</span>).show()</code></pre>
<button type="button" class="code">Run Code</button>
<pre><code contenteditable="true">$(<span>'article img'</span>).hide(<span>'slow'</span>)</code></pre>
<button type="button" class="code">Run Code</button>
<pre><code contenteditable="true">$(<span>'article img'</span>).show(<span>'slow'</span>)</code></pre>
<button type="button" class="code">Run Code</button>
<pre><code contenteditable="true">$(<span>'article img'</span>).toggle()</code></pre>
<button type="button" class="code">Run Code</button>
<pre><code contenteditable="true">$(<span>'article img'</span>).toggle(<span>'slow'</span>, function(){
$(this).toggle(<span>'slow'</span>)
})</code></pre>
<button type="button" class="code">Run Code</button>
</menu>
<header>
<h1>Анимация</h1>
<h2>Hide/Show/Toggle</h2>
</header>
<article id="stick" class="box">
<h2>Article</h2>
<p>
<img src="images/photo-bumblebee-tumb.jpg" alt="Bumblebee" class="left" width="200"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum,
lectus eu varius consectetur, libero velit hendrerit augue, ut posuere enim neque
in libero. Donec eget sagittis nibh. Suspendisse sed tincidunt urna. Cras quis
euismod neque. Maecenas auctor ultricies posuere. Pellentesque luctus pulvinar dui
eget semper. Donec sodales odio eu sapien varius luctus. Donec dictum feugiat diam
at malesuada. Sed nec massa in augue condimentum faucibus quis ut diam. Quisque
nisl sem, semper nec vulputate vel, mattis sit amet justo. Aliquam purus felis,
tempor at scelerisque quis, tincidunt in neque. Etiam ut risus diam. Pellentesque
fermentum risus id elit feugiat cursus. Ut fringilla dictum diam, sed iaculis
lorem pulvinar ut. Cras vel elit id velit commodo viverra sit amet vel orci.</p>
</article>
<article>
<h2>Article</h2>
<p>
<img src="images/photo-chamomile-tumb.jpg" alt="Chamomile" class="left" width="200"/>
Duis in vestibulum sem. Cras euismod tincidunt dui, et scelerisque tellus condimentum vel.
Maecenas et urna sit amet risus fermentum rhoncus nec porttitor ligula. Maecenas sit amet
turpis enim, ut iaculis est. Duis feugiat, lacus id placerat porttitor, lorem augue gravida
nisi, eu porta eros risus et lectus. Maecenas vestibulum nunc vel ipsum tincidunt sit amet
blandit sapien bibendum. Proin vel vulputate nisl. Duis tempor imperdiet placerat. Pellentesque
faucibus consequat magna, et bibendum nisl egestas non. Pellentesque sit amet mattis augue.
Aenean at diam tincidunt purus sollicitudin gravida non in nisi. Fusce bibendum, magna in
adipiscing mattis, sem risus fringilla mi, nec gravida lectus lectus at nibh. Suspendisse
adipiscing elementum laoreet. Suspendisse sem erat, varius quis aliquet vitae, dapibus sed
nibh. Nullam iaculis sem at mauris faucibus in vestibulum libero pretium. Aliquam eu turpis
libero. Fusce et ultrices lectus.</p>
</article>
<article>
<h2>Article</h2>
<p>
<img src="images/photo-maple-leaf-tumb.jpg" alt="Maple Leaf" class="left" width="200"/>
Ut consequat commodo mauris, eu dignissim justo congue vel. Etiam commodo tincidunt diam,
laoreet ullamcorper sapien egestas quis. Etiam auctor rutrum ante, at tincidunt elit lacinia
non. Pellentesque molestie tellus sit amet est sodales nec rutrum leo pharetra. Donec lacinia
ipsum vitae massa accumsan ullamcorper. Maecenas commodo lacus turpis. Proin sit amet mauris
sem, imperdiet faucibus lorem. Fusce ullamcorper consectetur ligula vel pretium. Sed et elit
vitae orci adipiscing condimentum id sed turpis. Morbi ultrices feugiat ullamcorper. Fusce at
magna dolor. Sed sit amet risus massa, quis imperdiet libero. Proin justo purus, sodales nec
cursus et, sollicitudin at nulla. Vivamus eget nibh tellus, sit amet facilisis ante.</p>
</article>
<footer>
©copyright 2014 Anton Shevchuk — <a href="http://anton.shevchuk.name/jquery-book/">jQuery Book</a>
</footer>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1669896-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</body>
</html>
</example>
<p>В довесок к этим двум методам есть еще метод "toggle()", он работает как
переключатель "hide → show" или "show → hide".</p>
<p>Теперь идём немножко дальше – вторым параметром в приведенных методах
может быть callback-функция – она будет выполнена по окончанию анимации
элементов:</p>
<example type="listing">// скрываем все картинки
$('img').hide('slow', function(){
// опосля отображаем alert
alert("Images was hidden");
});Приведу иллюстрацию для наглядности процесса анимации:
Анимацию атрибутов height, width и opacity видно невооружённым взглядом, в действительности же это далеко не всё, заглянув внутрь jQuery можно увидеть, что так же изменяются внутренние и внешние отступы – "padding" и "margin" – так что не стоит об этом забывать.
Идём дальше – у нас на очереди набор методов из семейства slide – "slideUp()", "slideDown()" и "slideToggle()". Их поведение схоже с предыдущими функциями, но анимация будет затрагивать лишь высоту блоков – смотрим пример (ну и иллюстрации так же есть):
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Пример анимации с использованием методов семейства Slide</title>
<link rel="profile" href="http://gmpg.org/xfn/11"/>
<link rel="shortcut icon" href="http://anton.shevchuk.name/favicon.ico"/>
<link rel="stylesheet" href="css/styles.css"/>s
<script src="js/jquery.js"></script>
<script src="js/code.js"></script>
<script>
function changeClass() {
$(this).prev().toggleClass('active')
}
$(function(){
$('article h2').click(function(){
$(this).next().slideToggle();
$(this).toggleClass('active');
});
});
</script>
</head>
<body>
<div id="content" class="wrapper box slides">
<menu label="Try...">
<a href="hide.html" title="go prev" class="button alignleft" rel="prev">← Prev </a>
<a href="index.html" title="back to Index" class="button alignleft" rel="index">Index §</a>
<a href="#" title="reload" class="button alignleft" onclick="window.location.reload();return false">Reload ¤</a>
<a href="fade.html" title="go next" class="button alignright" rel="next">Next →</a>
<hr/>
<pre><code><em>// callback function</em>
function changeClass() {
$(this).prev().toggleClass(<span>'active'</span>)
}</code></pre>
<pre><code contenteditable="true">$(<span>'article p'</span>).slideUp(<span>'slow'</span>, changeClass)</code></pre>
<button type="button" class="code">Run Code</button>
<pre><code contenteditable="true">$(<span>'article p'</span>).slideDown(<span>'slow'</span>, changeClass)</code></pre>
<button type="button" class="code">Run Code</button>
<pre><code contenteditable="true">$(<span>'article p'</span>).slideToggle(<span>'slow'</span>, changeClass)</code></pre>
<button type="button" class="code">Run Code</button>
</menu>
<header>
<h1>Анимация</h1>
<h2>SlideUp/SlideDown/SlideToggle</h2>
</header>
<article id="stick" class="box">
<h2>Article</h2>
<p>
<img src="images/photo-bumblebee-tumb.jpg" alt="Bumblebee" class="left" width="200"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum,
lectus eu varius consectetur, libero velit hendrerit augue, ut posuere enim neque
in libero. Donec eget sagittis nibh. Suspendisse sed tincidunt urna. Cras quis
euismod neque. Maecenas auctor ultricies posuere. Pellentesque luctus pulvinar dui
eget semper. Donec sodales odio eu sapien varius luctus. Donec dictum feugiat diam
at malesuada. Sed nec massa in augue condimentum faucibus quis ut diam. Quisque
nisl sem, semper nec vulputate vel, mattis sit amet justo. Aliquam purus felis,
tempor at scelerisque quis, tincidunt in neque. Etiam ut risus diam. Pellentesque
fermentum risus id elit feugiat cursus. Ut fringilla dictum diam, sed iaculis
lorem pulvinar ut. Cras vel elit id velit commodo viverra sit amet vel orci.</p>
</article>
<article>
<h2>Article</h2>
<p>
<img src="images/photo-chamomile-tumb.jpg" alt="Chamomile" class="left" width="200"/>
Duis in vestibulum sem. Cras euismod tincidunt dui, et scelerisque tellus condimentum vel.
Maecenas et urna sit amet risus fermentum rhoncus nec porttitor ligula. Maecenas sit amet
turpis enim, ut iaculis est. Duis feugiat, lacus id placerat porttitor, lorem augue gravida
nisi, eu porta eros risus et lectus. Maecenas vestibulum nunc vel ipsum tincidunt sit amet
blandit sapien bibendum. Proin vel vulputate nisl. Duis tempor imperdiet placerat. Pellentesque
faucibus consequat magna, et bibendum nisl egestas non. Pellentesque sit amet mattis augue.
Aenean at diam tincidunt purus sollicitudin gravida non in nisi. Fusce bibendum, magna in
adipiscing mattis, sem risus fringilla mi, nec gravida lectus lectus at nibh. Suspendisse
adipiscing elementum laoreet. Suspendisse sem erat, varius quis aliquet vitae, dapibus sed
nibh. Nullam iaculis sem at mauris faucibus in vestibulum libero pretium. Aliquam eu turpis
libero. Fusce et ultrices lectus.</p>
</article>
<article>
<h2>Article</h2>
<p>
<img src="images/photo-maple-leaf-tumb.jpg" alt="Maple Leaf" class="left" width="200"/>
Ut consequat commodo mauris, eu dignissim justo congue vel. Etiam commodo tincidunt diam,
laoreet ullamcorper sapien egestas quis. Etiam auctor rutrum ante, at tincidunt elit lacinia
non. Pellentesque molestie tellus sit amet est sodales nec rutrum leo pharetra. Donec lacinia
ipsum vitae massa accumsan ullamcorper. Maecenas commodo lacus turpis. Proin sit amet mauris
sem, imperdiet faucibus lorem. Fusce ullamcorper consectetur ligula vel pretium. Sed et elit
vitae orci adipiscing condimentum id sed turpis. Morbi ultrices feugiat ullamcorper. Fusce at
magna dolor. Sed sit amet risus massa, quis imperdiet libero. Proin justo purus, sodales nec
cursus et, sollicitudin at nulla. Vivamus eget nibh tellus, sit amet facilisis ante.</p>
</article>
<footer>
©copyright 2014 Anton Shevchuk — <a href="http://anton.shevchuk.name/jquery-book/">jQuery Book</a>
</footer>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1669896-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</body>
</html>
Прежде чем перейти к десерту упомяну семейство функций fade – они манипулируют лишь "opacity":
fadeIn(duration, callback) – изменяет "opacity" от 0 до предыдущего
fadeOut(duration, callback) – изменяет "opacity" от текущего до 0
fadeToggle(duration, callback) – переключатель между "In" и "Out"
fadeTo(duration, opacity, callback) – изменяет значение "opacity" до требуемого значения
А теперь самое сладкое – все эффекты анимации в jQuery крутятся вокруг метода "animate()". Данная функция берет один или несколько CSS-свойств элемента и изменяет их от исходного до заданного за N-ое количество итераций (количество итераций зависит от указанного времени, но не реже одной итерации в 13мс, если я правильно накопал это значение). Ну что-же, от слов к делу, попробуем реализовать функции "fadeIn()" и "fadeout()" с помощью "animate()" (см. пример):
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Пример анимации с методом animate()</title>
<link rel="profile" href="http://gmpg.org/xfn/11"/>
<link rel="shortcut icon" href="http://anton.shevchuk.name/favicon.ico"/>
<link rel="stylesheet" href="css/styles.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/code.js"></script>
</head>
<body>
<div id="content" class="wrapper box">
<menu label="Try...">
<a href="fade.html" title="go prev" class="button alignleft" rel="prev">← Prev </a>
<a href="index.html" title="back to Index" class="button alignleft" rel="index">Index §</a>
<a href="#" title="reload" class="button alignleft" onclick="window.location.reload();return false">Reload ¤</a>
<a href="animate.queue.html" title="go next" class="button alignright" rel="next">Next →</a>
<hr/>
<pre><code contenteditable="true"><em>// fadeOut()</em>
$(<span>'article img'</span>).animate({
<span>'opacity'</span>:<span>'hide'</span>
})</code></pre>
<button type="button" class="code">Run Code</button>
<pre><code contenteditable="true"><em>// fadeIn()</em>
$(<span>'article img'</span>).animate({
<span>'opacity'</span>:<span>'show'</span>
})</code></pre>
<button type="button" class="code">Run Code</button>
<pre><code contenteditable="true"><em>// resize to</em>
$(<span>'article img'</span>).animate({
<span>'opacity'</span>:0.5,
<span>'height'</span>:<span>'50px'</span>,
<span>'width'</span>:<span>'250px'</span>
})</code></pre>
<button type="button" class="code">Run Code</button>
<pre><code contenteditable="true"><em>// change current</em>
$(<span>'article img'</span>).animate({
<span>'opacity'</span>:<span>'-=0.1'</span>,
<span>'height'</span>:<span>'+=10px'</span>
})</code></pre>
<button type="button" class="code">Run Code</button>
<pre><code contenteditable="true"><em>// change current</em>
$(<span>'article img'</span>).animate({
<span>'width'</span>:<span>'+=50%'</span>
})</code></pre>
<button type="button" class="code">Run Code</button>
</menu>
<header>
<h1>Анимация</h1>
<h2>Без обёрток, лишь используя animate()</h2>
</header>
<article id="stick" class="box">
<h2>Article</h2>
<p>
<img src="images/photo-bumblebee-tumb.jpg" alt="Bumblebee" class="left" width="200"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum,
lectus eu varius consectetur, libero velit hendrerit augue, ut posuere enim neque
in libero. Donec eget sagittis nibh. Suspendisse sed tincidunt urna. Cras quis
euismod neque. Maecenas auctor ultricies posuere. Pellentesque luctus pulvinar dui
eget semper. Donec sodales odio eu sapien varius luctus. Donec dictum feugiat diam
at malesuada. Sed nec massa in augue condimentum faucibus quis ut diam. Quisque
nisl sem, semper nec vulputate vel, mattis sit amet justo. Aliquam purus felis,
tempor at scelerisque quis, tincidunt in neque. Etiam ut risus diam. Pellentesque
fermentum risus id elit feugiat cursus. Ut fringilla dictum diam, sed iaculis
lorem pulvinar ut. Cras vel elit id velit commodo viverra sit amet vel orci.</p>
</article>
<article>
<h2>Article</h2>
<p>
<img src="images/photo-chamomile-tumb.jpg" alt="Chamomile" class="left" width="200"/>
Duis in vestibulum sem. Cras euismod tincidunt dui, et scelerisque tellus condimentum vel.
Maecenas et urna sit amet risus fermentum rhoncus nec porttitor ligula. Maecenas sit amet
turpis enim, ut iaculis est. Duis feugiat, lacus id placerat porttitor, lorem augue gravida
nisi, eu porta eros risus et lectus. Maecenas vestibulum nunc vel ipsum tincidunt sit amet
blandit sapien bibendum. Proin vel vulputate nisl. Duis tempor imperdiet placerat. Pellentesque
faucibus consequat magna, et bibendum nisl egestas non. Pellentesque sit amet mattis augue.
Aenean at diam tincidunt purus sollicitudin gravida non in nisi. Fusce bibendum, magna in
adipiscing mattis, sem risus fringilla mi, nec gravida lectus lectus at nibh. Suspendisse
adipiscing elementum laoreet. Suspendisse sem erat, varius quis aliquet vitae, dapibus sed
nibh. Nullam iaculis sem at mauris faucibus in vestibulum libero pretium. Aliquam eu turpis
libero. Fusce et ultrices lectus.</p>
</article>
<article>
<h2>Article</h2>
<p>
<img src="images/photo-maple-leaf-tumb.jpg" alt="Maple Leaf" class="left" width="200"/>
Ut consequat commodo mauris, eu dignissim justo congue vel. Etiam commodo tincidunt diam,
laoreet ullamcorper sapien egestas quis. Etiam auctor rutrum ante, at tincidunt elit lacinia
non. Pellentesque molestie tellus sit amet est sodales nec rutrum leo pharetra. Donec lacinia
ipsum vitae massa accumsan ullamcorper. Maecenas commodo lacus turpis. Proin sit amet mauris
sem, imperdiet faucibus lorem. Fusce ullamcorper consectetur ligula vel pretium. Sed et elit
vitae orci adipiscing condimentum id sed turpis. Morbi ultrices feugiat ullamcorper. Fusce at
magna dolor. Sed sit amet risus massa, quis imperdiet libero. Proin justo purus, sodales nec
cursus et, sollicitudin at nulla. Vivamus eget nibh tellus, sit amet facilisis ante.</p>
</article>
<footer>
©copyright 2014 Anton Shevchuk — <a href="http://anton.shevchuk.name/jquery-book/">jQuery Book</a>
</footer>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1669896-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</body>
</html>
// fadeOut()
$('article img').animate({
'opacity':'hide'
})
// fadeIn()
$('article img').animate({
'opacity':'show'
})Всё просто, давайте-ка теперь усложним задачу – изменим размер блоков и прозрачность:
// значения указанных свойств будут плавно изменяться
// от текущих до заданных
$('article img').animate({
'opacity':0.5,
'height':'50px',
'width':'250px'
})Как видите – тоже несложно, теперь попробуем отталкиваться от текущих значений, а не задавать необходимые:
// изменяем, шаг за шагом
$('article img').animate({
'opacity':'-=0.1',
'height':'+=10px'
})Поигрались и хватит, пора усложнить вам жизнь – у функции "animate()" может быть более одного параметра, и пора приступить к их разбору. Набор параметров может быть разным, приведу первый, тот, что попроще:
params – CSS свойства – с этим мы уже познакомились
duration – скорость анимации – тоже упоминалась ранее, указывается в миллисекундах, или используя ключевые слова "fast" или "slow"
easing – указываем какую функцию будем использовать для изменения значений
callback – функция, которая будет вызвана после окончания анимации
Из приведённых параметров нам только "easing" не встречался ранее – я его берёг на сейчас – этот параметр указывает, какая функция будет использоваться для процесса анимации значений. Это могут быть линейные, квадратичные, кубически и любые другие функции. "Из коробки" мы можем выбрать лишь между "linear" и "swing":
Заглянув в код jQuery мы легко найдём соответствующий код:
linear: function(p) {
return p;
},
swing: function(p) {
return 0.5 - Math.cos( p*Math.PI ) / 2;
}
p – коэффициент прохождения анимации, изменяется от 0 до 1
Сложно? Хотите больше и сразу? Тогда ищите easing plugin на странице http://gsgd.co.uk/sandbox/jquery/easing/, он действительно из разряда "must have".
Подключайте и используйте одну из трёх десятков функций easing (наглядно, с иллюстрациями – , а так же http://easings.net/)
Но давайте вернёмся к функции "animate()", которая в качестве параметров может принимать ещё один набор параметров, который уже не будет казаться таким простым:
params – CSS свойства (уже было)
options – тут целый набор возможностей, часть уже описывалась ранее:
duration – скорость анимации
easing – функция ("linear" или "swing")
complete – функция, которая будет вызвана после окончания анимации
step – функция, которая будет вызвана на каждом шаге анимации, о ней расскажу чуть ниже
queue – флаг/параметр очереди, чуть позже опишу подробнее
specialEasing – хэш в котором можно описать какую именно easing функцию следует использовать для изменения определённых параметров
