<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Очередной блог фрилансера &#187; изучаем Jquery</title>
	<atom:link href="http://dreamhelg.ru/category/learning_jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://dreamhelg.ru</link>
	<description>о моей работе в сети и не только</description>
	<lastBuildDate>Fri, 23 Dec 2011 07:10:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>10 отличных jQuery-сниппетов</title>
		<link>http://dreamhelg.ru/2011/11/10-awesome-jquery-snippets/</link>
		<comments>http://dreamhelg.ru/2011/11/10-awesome-jquery-snippets/#comments</comments>
		<pubDate>Tue, 22 Nov 2011 11:39:00 +0000</pubDate>
		<dc:creator>dreamhelg</dc:creator>
				<category><![CDATA[изучаем Jquery]]></category>
		<category><![CDATA[переводы]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://dreamhelg.ru/?p=2207</guid>
		<description><![CDATA[<p><img width="200" height="200" src="http://dreamhelg.ru/wp-content/uploads/2011/11/home.jpg" class="attachment-200x200 wp-post-image" alt="home" title="home" /></p>jQuery вдохнул новую жизнь в JavaScript-программирование. Благодаря этому замечательному инструменту, появилась возможность с легкостью создавать мощные и интерактивные страницы. В сегодняшней статье собраны 10 полезных примеров jQuery-кода, которые обязательно вам пригодятся при разработке клиентской стороны сайта.<span id="more-2207"></span>

<h3>Предзагрузка изображений</h3>
Предзагрузка изображений весьма удобна: вместо того чтобы загружать картинку по запросу пользователя, мы предварительно подгружаем их в фоне, для того чтобы они сразу были готовы к показу. С помощью jQuery это делается очень просто, смотрите:

[javascript]
(function($) {
  var cache = [];
  // Аргументами являются пути картинок, относительно текущей страницы
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }

jQuery.preLoadImages(&quot;image1.gif&quot;, &quot;/path/to/image2.png&quot;);
[/javascript]

Источник: <a title="http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript" href="http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript">http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript</a>

<h3>Ссылки target=”blank”</h3>
Следующий фрагмент предназначен для того, чтобы все ссылки, имеющие атрибут <strong>rel=”external”, </strong>открывались в новом табе/окне. Код легко можно изменить, например открывать ссылки только с определенным классом.

[javascript]
$('a[@rel$='external']').click(function(){
     this.target = &quot;_blank&quot;;
});

/*
   Использование:
   &lt;a href=&quot;http://www.catswhocode.com&quot; rel=&quot;external&quot;&gt;catswhocode.com&lt;/a&gt;
*/
[/javascript]

Источник: <a title="http://snipplr.com/view/315/-jquery–target-blank-links/" href="http://snipplr.com/view/315/-jquery–target-blank-links">http://snipplr.com/view/315/-jquery–target-blank-links</a>
<h3>Добавление класса тэгу &lt;body&gt; при включенном ява-скрипте</h3>
Этот пример состоит всего из одной строчки, но он является самым простым способом определить включен ли ява-скрипт в клиентском браузере. Если ява-скрипт включен, класс <strong>hasJs</strong> будет добавлен к тегу <strong>&lt;body&gt;.</strong>

[javascript]
$('body').addClass('hasJS');
[/javascript]

Источник: <a title="http://eisabainyo.net/weblog/2010/09/01/10-useful-jquery-snippets/" href="http://eisabainyo.net/weblog/2010/09/01/10-useful-jquery-snippets">http://eisabainyo.net/weblog/2010/09/01/10-useful-jquery-snippets</a>

<h3>Плавная прокрутка по ссылке</h3>
jQuery хорошо известен своей возможностью легко создавать красивые визуальные эффекты. Одним из таких эффектов, является плавная прокрутка страницы, при нажатии на ссылку. Следующий пример демонстрирует пример такой прокрутки страницы, по клику на ссылку с классом <strong>topLink.</strong>

[javascript]
$(document).ready(function() {
	$(&quot;a.topLink&quot;).click(function() {
		$(&quot;html, body&quot;).animate({
			scrollTop: $($(this).attr(&quot;href&quot;)).offset().top + &quot;px&quot;
		}, {
			duration: 500,
			easing: &quot;swing&quot;
		});
		return false;
	});
});
[/javascript]

Источник: <a title="http://snipplr.com/view.php?codeview&amp;id=26739" href="http://snipplr.com/view.php?codeview&amp;id=26739">http://snipplr.com/view.php?codeview&amp;id=26739</a>

<h3>Изменение прозрачности при наведении</h3>
Еще один красивый эффект – очень популярный среди клиентов – эффект затухания элемента при движении мыши. Следующий пример кода, реализует плавное изменение прозрачности картинки при наведении/отведении мыши.

[javascript]
$(document).ready(function(){
    $(&quot;.thumbs img&quot;).fadeTo(&quot;slow&quot;, 0.6); // Эта строчка при загрузке страницы задает всем миниатюрам прозрачность равную 60% 
    
    $(&quot;.thumbs img&quot;).hover(function(){
        $(this).fadeTo(&quot;slow&quot;, 1.0);  // Делаем картинку непрозрачной, при наведении мыши
    },function(){
        $(this).fadeTo(&quot;slow&quot;, 0.6); // Снова возвращаем прозрачность 60%, при отведении мыши
    });
});
[/javascript]

Источник: <a title="http://snipplr.com/view/18606/" href="http://snipplr.com/view/18606">http://snipplr.com/view/18606</a>
<h3>Колонки одинаковой высоты</h3>
При создании сайта с колонками, очень часто требуется, чтобы все колонки были одинаковой высоты, как это можно было сделать в старых, добрых таблицах. Этот пример кода вычисляет высоту самой длинной колонки, и автоматически задает ту же высоту всем остальным.

[javascript]
var max_height = 0;
$(&quot;div.col&quot;).each(function(){
    if ($(this).height() &gt; max_height) { max_height = $(this).height(); }
});
$(&quot;div.col&quot;).height(max_height);
[/javascript]

Источник: <a title="http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/" href="http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4">http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4</a>

<h3>Включаем HTML5-разметку в старых браузерах</h3>
HTML5 – это будущее клиентской веб-разработки. К сожалению, некоторые старые браузеры не умеют распознавать новые теги, такие как <strong>header</strong> и <strong>section. </strong>Этот пример кода, научит старые браузеры распознавать новые HTML5-тэги.

[javascript]
(function(){if(!/*@cc_on!@*/0)return;var e = &quot;abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video&quot;.split(','),i=e.length;while(i--){document.createElement(e[i])}})()
[/javascript]

Еще лучше будет, если вы подключите .js-файл в секции <strong>&lt;head&gt;</strong> вашей html-страницы.

[javascript]
&lt;!--[if lt IE 9]&gt;
&lt;script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;
[/javascript]

Источник: <a title="http://remysharp.com/2009/01/07/html5-enabling-script/" href="http://remysharp.com/2009/01/07/html5-enabling-script/">http://remysharp.com/2009/01/07/html5-enabling-script/</a>

<h3>Проверяем поддерживает ли браузер определенное CSS3-свойство</h3>
Ниже представлена простая jQuery-функция, проверяющая, поддерживает ли браузер клиента определенное CSS3-свойство. В этом примере, мы проверяем свойство border-radius, но его конечно, легко можно изменить на любое другое.

Обратите внимание, что при указании свойства, вам нужно опустить дефис, чтобы предотвратить ошибку синтаксиса. Поэтому вместо border-radius, вам нужно написать “borderRadius” или “BorderRadius”.

[javascript]
var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            // browser supports box-shadow. Do what you need.
            // Or use a bang (!) to test if the browser doesn't.
            return true;
         }
      }
      return false;
   };
})();

if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
[/javascript]

Источник:  <a title="http://snipplr.com/view/44079" href="http://snipplr.com/view/44079">http://snipplr.com/view/44079</a>
<h3>Получаем параметры url</h3>
Получение url-параметров с помощью jQuery – довольно простая задача. Следующий пример это продемонстрирует.

[javascript]
$.urlParam = function(name){
	var results = new RegExp('[\\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
	if (!results) { return 0; }
	return results[1] || 0;
}
[/javascript]

Источник: <a title="http://snipplr.com/view/26662" href="http://snipplr.com/view/26662">http://snipplr.com/view/26662</a>
<h3>Отключаем клавишу “Enter” в формах</h3>
По умолчанию, форма отправляется на сервер при нажатии клавиши “Enter”. Но для некоторых форм, нажатие этой клавиши может вызвать проблемы. Следующий пример кода, поможет вам предотвратить нежелательную отправку формы, путем отключения клавиши “Enter”, с помощью jQuery.

[javascript]
$(&quot;#form&quot;).keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});
[/javascript]

Источник: <a title="http://snipplr.com/view/10943/disable-enter-via-jquery/" href="http://snipplr.com/view/10943/disable-enter-via-jquery">http://snipplr.com/view/10943/disable-enter-via-jquery</a>

Перевод статьи “<a href="http://www.catswhocode.com/blog/10-awesome-jquery-snippets">10 awesome jQuery snippets</a>”, автор  <strong>Jean-Baptiste Jung</strong>]]></description>
		<wfw:commentRss>http://dreamhelg.ru/2011/11/10-awesome-jquery-snippets/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Анимация jQuery: изучение за 7 шагов</title>
		<link>http://dreamhelg.ru/2010/01/jquery-animation-a-7-step-program/</link>
		<comments>http://dreamhelg.ru/2010/01/jquery-animation-a-7-step-program/#comments</comments>
		<pubDate>Thu, 21 Jan 2010 08:15:48 +0000</pubDate>
		<dc:creator>dreamhelg</dc:creator>
				<category><![CDATA[изучаем Jquery]]></category>
		<category><![CDATA[переводы]]></category>
		<category><![CDATA[animate]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jquery UI]]></category>

		<guid isPermaLink="false">http://dreamhelg.ru/?p=1823</guid>
		<description><![CDATA[<p><img width="200" height="200" src="http://dreamhelg.ru/wp-content/uploads/2010/01/200x200.jpg" class="attachment-200x200 wp-post-image" alt="200x200" title="200x200" /></p>Небольшой штрих анимации может украсить любой, скучный интерфейс. В сегодняшней статье, вы узнаете, как правильно ее использовать с помощью jQuery.<span id="more-1823"></span>

<h3>Вступление</h3>
Анимация – понятие, которое обычно вызывает неоднозначную реакцию у людей. Одни считают ее полезной, другие осуждают ее чрезмерное использование. Несмотря на это, правильно используемая анимация, зачастую украшает пользовательский интерфейс, и делает его более опрятным и живым. В сегодняшней статье, мы коротко рассмотрим основы jQuery, затем научимся создавать нашу первую анимацию, научимся строить различные эффекты, а затем создадим анимацию, которую вполне можно будет использовать в реальных проектах.

<h3>Шаг 1. Основы jQuery</h3>
jQuery – это JavaScript библиотека, которая призвана помочь разработчику создавать многофункциональные, интерактивные веб-сайты и пользовательские интерфейсы, с использованием минимально возможного количества кода.

Обычная строка кода, выглядит следующим образом:

[javascript]$(DOM Element).something();[/javascript]

Давайте разберем каждую часть:
<ul>
	<li><strong>$</strong> - Сокращение для объекта jQuery. Если вы одновременно используете несколько фреймворков на одной странице, вместо знака $, воспользуетесь сокращением jQuery:  jQuery(DOM Element).something();</li>
	<li><strong>(DOM Element) </strong>– Элемент, с которым вы собираетесь что-то сделать. Это одна из ключевых особенностей jQuery. Вы можете использовать CSS-селекторы для получения нужного элемента. Любые селекторы, работающие в CSS-файле, могут быть использованы здесь. ID, классы, псевдо-классы, все что угодно.</li>
	<li><strong>.something() </strong>– То, что вы хотите сделать с полученным элементом. Это может быть все что угодно от простого скрытия элемента до создания AJAX-запроса к обработчику события.</li>
</ul>

Сегодня мы рассмотрим только анимацию, и эффекты, связанные с ее функциональностью.

<h3>Шаг 2. Использование встроенных эффектов</h3>
jQuery предоставляет большое количество встроенных методов, которые вы можете использовать прямо из коробки. Это методы для отображения/скрытия элементов, с различными вариациями, включающими скольжение элемента и изменение его прозрачности. Вы также можете использовать ряд методов <strong>toggle</strong>, которые переключают видимость элемента.

Прежде чем мы рассмотрим каждый из этих методов, посмотрите на основной формат вызова каждого метода:

[javascript]$(&quot;#element&quot;).effect([speed, callback]);[/javascript]

Выше представлена основная парадигма jQuery, сначала мы получаем необходимый элемент, используя CSS-селекторы. Далее, мы просто вызываем любой  из встроенных методов.

Несмотря на то, что большинство методов можно вызвать без параметров, часто возникает необходимость настроить их функциональность. Каждый из методов принимает как минимум два параметра: <strong>speed</strong> и <strong>callback</strong>.

<strong>speed</strong> – определяет продолжительность анимации в секундах. Вы можете передать в качестве значения одно из ключевых слов: slow, normal или fast; или задать время в миллисекундах.

<strong>callback</strong> - это функция, которая выполняется после того как анимация завершена. Вы можете использовать ее для чего угодно, например, сделать AJAX-вызов в фоне, обновить часть пользовательского интерфейса и многое другое. Вы ограничены только своим воображением.

Далее представлен список функций, всходящий в состав jQuery:
<ul>
	<li><strong>show</strong>/<strong>hide</strong> – Методы для отображения и скрытия элемента. Принимают в качестве параметров speed и callback.</li>
	<li><strong>toggle</strong> – Метод, манипулирующий с отображением элемента, в зависимости от текущего состояния элемента. То есть если он скрыт, то отображает его и наоборот. Использует методы show и hide.</li>
	<li><strong>slideDown</strong>/<strong>slideUp</strong> – Вполне очевидные методы. Изменяя высоту элемента, создается скользящая анимация, отображающая или наоборот скрывающая элемент.</li>
	<li><strong>slideToggle</strong> – Практически то же самое что и метод toggle, за исключением того, что здесь используются методы slideDown/slideUp, для отображения/скрытия элемента.</li>
	<li><strong>fadeIn</strong>/<strong>fadeout</strong> – Изменение прозрачности элемента, для создания эффекта затухания.</li>
	<li><strong>fadeTo</strong> – Изменяет прозрачность элемента в соответствии с переданным значением.  Как нетрудно догадаться, он принимает дополнительный параметр opacity, где 0 это полная прозрачность, а 1 полная непрозрачность.</li>
</ul>

В качестве дополнительной функциональности, метод <strong>toggle</strong>, может принимать в качестве параметра выражение, решающее отображать элемент, или прятать.

Например, если вы хотите переключать только те элементы списка, которые имеют класс <em>effect</em>, ваш код будет выглядеть следующим образом:

[javascript]$(&quot;li&quot;).toggle( $(this).hasClass(&quot;effect&quot;) );[/javascript]

Проще говоря, функция <strong>toggle</strong> проверяет выражение, переданное ему в качестве параметра, и если оно истинно, то он переключает видимость элемента. Выражение, которые мы передали, в примере, проверяет наличие у элемента определенного класса.

<h3>Шаг 3. Создание собственной анимации</h3>
Очень часто, встроенные методы не удовлетворяют вашим потребностям, в этом случае вы, скорее всего, захотите создать свои собственные эффекты. С помощью jQuery вы легко сможете это сделать .

Чтобы создать персональный анимационный эффект, вам понадобится метод <strong>animate</strong>. Это выглядит следующим образом:

[javascript]$(&quot;#somelement&quot;).animate({property: value}, [speed, callback] );[/javascript]

Метод <strong>animate</strong> весьма похож на любые другие методы тем, что используется точно так же. Мы получаем элемент, и затем передаем ему некоторые параметры. Принимаемые параметры – это то, в чем метод <strong>animate</strong> отличается от готовых эффектов.

Параметры speed и callback выполняют те же функции, что и в предыдущих методах. Объект со свойствами, состоящими из определенного количества пар ключ/значение – то, что делает этот метод уникальным. Вы передаете каждое свойство, которое хотите анимировать, вместе с финальным результатом. Например, предположим, вы хотите анимировать изменение ширины элемента, на 90% от его текущего значения. Это можно сделать следующим образом:

[javascript]
$(&quot;#somelement&quot;).animate({width: &quot;90%&quot;}, 350, function(){
         alert (&quot;The animation has finished running.&quot;);
  }
);
[/javascript]

Указанный пример кода, анимирует изменение ширины на 90%, а затем выдает сообщение, что анимация завершена.

Заметьте, что вы не ограничены в количестве. Вы можете добавить анимацию большому массиву свойств, включая прозрачность, поля, отступы, рамки, размеры шрифтов. Метод <strong>animate</strong>, удобен еще и потому, что может работать с любыми единицами измерения. Пиксели, ems, проценты – все работает. Так что, даже, представленный ниже, запутанный пример кода, будет работать. Правда выглядеть будет не очень понятно.

[javascript]
$(&quot;#somelement&quot;).animate({  
width: &quot;90%&quot;  
fontSize: &quot;14em&quot;,  
height: &quot;183px&quot;,  
opacity: 0.8,  
marginTop: &quot;2cm&quot;,  
marginLeft: &quot;0.3in&quot;,  
borderBottom: &quot;30mm&quot;,  
}, 350, function(){alert (&quot;The animation has finished running.&quot;);}); 
[/javascript]

При указании свойства, состоящего из нескольких слов, оно записывается без тире, и первая буква второго слова должна быть заглавной. Такая запись значительно отличается от привычного синтаксиса CSS, поэтому обязательно постарайтесь это запомнить. Например, свойство <strong>border-top</strong>, следует записывать  <strong>borderTop</strong>.

<blockquote><strong>Обратите внимание</strong>: jQuery позволяет анимировать только числовые значения свойств. Это значит, что вы не сможете анимировать цветовые свойства, используя только jQuery. Но все не так плохо. С небольшой помощью jQuery UI, вы сможете добавить анимацию цвета очень легко.</blockquote>

<h3>Шаг 4. Настройка эффекта</h3>
Если вы рассмотрите простой эффект на демонстрационной странице, то возможно заметите небольшую ошибку. Многократное наведение мыши на элемент, приводит к образованию длинной очереди из повторяющихся анимационных эффектов. В результате появляется неприятный, дергающийся эффект.

Самый простой способ решить эту проблему – использовать метод <strong>stop</strong>, непосредственно до начала анимации.  Этот метод отлично очищает очередь, и анимация выполняется в обычном режиме.

Например, это ваш обычный код:

[javascript]
$(&quot;#someelement&quot;)  
  .hover(function() {  
    $(this).animate({ top: 20 }, 'fast');  
  }, function() {  
    $(this).animate({ top: 0 }, 'fast');  
  });  
[/javascript]

Используя метод <strong>stop</strong> для предотвращения лишних повторений анимации, ваш новый код будет выглядеть вот так:

[javascript]
$(&quot;#someelement&quot;)  
  .hover(function() {  
    $(this).stop().animate({ top: 20 }, 'fast');  
  }, function() {  
    $(this).stop().animate({ top: 0 }, 'fast');  
  });  
[/javascript]

Очень просто, правда? Но этот метод имеет одну небольшую проблему. Быстрые движения не приводят к повторяющемуся эффекту, но за это приходится расплачиваться неполной анимацией. Если вы хотите полностью решить эту проблему, вам понадобится плагин наподобие <a href="http://www.2meter3.de/code/hoverFlow/">hoverFlow</a>.

<h3>Шаг 5.  Добавление реализма – Easing</h3>
Если хотите добавить чуть больше реализма, вам понадобится дополнительный контроль над скоростью, с которой выполняется анимация. Вот здесь нам на помощь приходит easing. <strong>Easing</strong> контролирует ускорение и замедление анимации по времени.

Метод, который <strong>easing</strong> использует по умолчанию, называется <strong>swing</strong>, он встроен в базовый функционал jQuery. <a href="http://gsgd.co.uk/sandbox/jquery/easing/">Плагин Роберта Пеннера easing</a>, позволит вам использовать несколько различных эффектов.

Существует только одно предостережение, когда речь идет об использовании персональных эффектов easing:  вы можете использовать их только вместе со специальными эффектами анимации, то есть, с методом <strong>animate()</strong>. После того, как вы подключили плагин, использовать любой метод easing очень просто, передав его в качестве параметра:

[javascript]
$(&quot;#somelement&quot;).animate({  
width: &quot;90%&quot;  
height: &quot;183px&quot;,  
}, 550, &quot;easeInElastic&quot;); 
[/javascript]

Вы можете проверить, как выглядят различные эффекты easing в действии, на демо-странице, в соответствующем разделе. И хотя некоторые из эффектов не подходят ко всем ситуациям, ваша анимация будет выглядеть гораздо более привлекательной при правильном использовании некоторых методов easing.

<h3>Шаг 6. Поднимаемся на ступеньку выше – jQuery UI</h3>
Апгрейд до jQuery UI приносит нам ряд необходимых функций. Фактически, для использования дополнительных функций, вам не потребуется полная библиотека. Для получения нужной функциональности, вам потребуются встроенные эффекты. Не само ядро UI, только файл со встроенными эффектами, который весит около 10 килобайт.

Наиболее важными функциями, которые предоставляет библиотека эффектов jQuery UI, является поддержка анимации цветов, easing и переходы классов.

Если помните, я уже говорил, что в jQuery анимацию можно применить только к числовым значениям. С jQuery UI об этом ограничении можно забыть. Теперь вы легко сможете анимировать фоновый цвет элемента, цвет рамки и тому подобное. Кроме того, вместо того чтобы создавать отдельные функции для новых возможностей, jQuery UI просто расширяет базовый функционал <strong>animate</strong>. То есть, если вы включили библиотеку в свою страницу, то можете использовать обычный метод <strong>animate</strong>, и он сделает всю грязную работу за вас.

Например, если вы хотите анимировать цвет рамки элемента, при наведении, то ваш код будет выглядеть следующим образом:

[javascript]
$(&quot;.block&quot;).hover(function() {  
    $(this).animate({ borderColor: &quot;black&quot; }, 1000);  
},function() {  
    $(this).animate({ borderColor: &quot;red&quot; }, 500);  
});  
[/javascript]

Переходы классов отвечают за анимацию между классами. При использовании базовой библиотеки jQuery, если вы удаляете, а затем добавляете класс, изменяющий внешний вид элемента, то это происходит мгновенно. Когда в вашем распоряжении имеется библиотека UI, вы получаете возможность передавать дополнительные параметры, управляющие скоростью анимации, метод <strong>easing</strong> и <strong>callback</strong>. Эта функциональность, как и предыдущие, является надстройкой над существущим API jQuery, облегчающей процесс перехода.

<h3>Шаг 7. Создание первого, настоящего эффекта</h3>
Все вышеуказанные примеры являются всего лишь демо-версиями функциональности. Неплохо было бы использовать их для создания настоящего эффекта. Именно этим мы и займемся. Наш эффект не будет чем-то радикальным или особенным, но с его помощью, вы узнаете как применить полученные знания на практике.

Предположим, нам нужно отобразить картинку, внутри которой будут появляться две секции, при наведении мыши. Верхняя секция будет содержать заголовок картинки, нижняя – ее краткое описание. Я знаю, что вы можете найти огромное количество различных плагинов, которые делают то же самое, но сегодня мы сделаем это с нуля. Это не так сложно, как кажется. Фактически, это очень просто и делается довольно быстро. Давайте начнем.
<h3>HTML</h3>
Для начала нам понадобится HTML-основа

[html]
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en-GB&quot;&gt;
&lt;head&gt;
&lt;title&gt;Анимация с JQuery для начинающих&lt;/title&gt;
&lt;link type=&quot;text/css&quot; href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jqueryui.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/mojo.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id=&quot;container&quot;&gt;

&lt;h1&gt;Анимация с JQuery для начинающих&lt;/h1&gt;

&lt;div class=&quot;bblock&quot;&gt;
&lt;h2&gt;Простой пример использования&lt;/h2&gt;
&lt;p&gt;
	Простой пример использования возможностей анимации jQuery.
	Наведите курсор на картинку, чтобы увидеть ее название и описание.
	При отведении мыши, они скроются. При наведении курсора на блоки с названием и описанием изображения, они изменят фоновый цвет.
&lt;/p&gt;	

&lt;p&gt;Анимация использует easing, для создания большей привлекательности.&lt;/p&gt;

&lt;div class=&quot;item&quot;&gt;
&lt;div class=&quot;title&quot;&gt;ThemeForest&lt;/div&gt;
&lt;img src=&quot;images/tf.jpg&quot; alt=&quot;Image&quot; /&gt;
&lt;div class=&quot;desc&quot;&gt;Сайт, где вы найдете множество шаблонов и тем&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;item last&quot;&gt;
&lt;div class=&quot;title&quot;&gt;CodeCanyon&lt;/div&gt;
&lt;img src=&quot;images/cc.jpg&quot; alt=&quot;Image&quot; /&gt;
&lt;div class=&quot;desc&quot;&gt;Сайт, содержащий множество скриптов и примеров кода.&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;

&lt;!-- Rest of the code for the demo --&gt;  
&lt;/div&gt;  
&lt;/body&gt;  
&lt;/html&gt;  
[/html]

Для этого эффекта, нам нужно продумать структуру каждого элемента. Каждый элемент будет заключен в div, с классом <em>item</em>. Внутри дива, будет размещено три элемента: картинка, и два дива, содержащих название и описание картинки.

Остальные части довольно простые. Нам понадобится подключить на страницу библиотеку jQuery, jQuery UI и файл, содержащий наш персональный код. Помните, что нам необходимы только эффекты jQuery UI, если вы хотите включить больше эффектов, вам понадобится специальная сборка, скачать которую можно здесь.

Вот так будет выглядеть наша страница на этом этапе.

<a href="http://dreamhelg.ru/wp-content/uploads/2010/01/before_css.jpg"><img class="aligncenter size-full wp-image-1837" title="before_css" src="http://dreamhelg.ru/wp-content/uploads/2010/01/before_css.jpg" alt="" width="469" height="606" /></a>
<h3>CSS</h3>

[css]
.item {  
    position: relative;  
    margin: 20px 60px 40px 0;  
    overflow: hidden;  
}  
  
.item .title, .item .desc {  
    background: #000;  
    color: #fff;  
    position: absolute;  
    display: block;  
    width: 638px;  
    opacity: 0.4;   
}  
  
.item .title {  
    top: 0;  
    font-size: 16px;  
    padding: 12px 10px 25px 0;  
    text-align: rightright;  
}  
  
.item .desc {  
    bottombottom: 0;  
    font-size: 12px;  
    padding: 5px 0 15px 10px;  
}  
[/css]

Здесь есть несколько моментов, на которые вам стоит обратить внимание. Каждому элементу установлено свойство <em>position</em> в значение <em>relative</em>, для того чтобы внутри этого элемента легко было расположить другие. Также, блокам назначено свойство <em>overflow: hidden</em>, с тем, чтобы мы могли скрывать название и описание картинки снаружи, когда они не нужны.

Блокам, которые содержат название и описание, установлено свойство <em>position: absolute</em>, так что они точно позиционируются внутри блока с картинкой. Заголовку назначена координата <em>top: 0</em>, так что он располагается вверху, а описанию <em>bottom: 0</em>, и он соответственно, расположен внизу.

Остальной CSS очень простой, назначены стили для шрифтов, немного позиционирования. Ничего особенного.

Теперь наша страница выглядит вот так.

<a href="http://dreamhelg.ru/wp-content/uploads/2010/01/with_css.jpg"><img class="aligncenter size-full wp-image-1838" title="with_css" src="http://dreamhelg.ru/wp-content/uploads/2010/01/with_css.jpg" alt="" width="471" height="610" /></a>
<h3>Включаем JavaScript-магию</h3>

[javascript]
$(document).ready(function()   
{  
    // Code for other parts of the demo  
      
    $(&quot;.item&quot;).children(&quot;div.title&quot;).animate({top: -60}, 300);  
    $(&quot;.item&quot;).children(&quot;div.desc&quot;).animate({bottom: -40}, 300);  
      
$(&quot;.item&quot;).hover(  
        function()  
        {  
            $(this).children(&quot;div.title&quot;).stop().animate({top: 0}, 700, &quot;easeOutBounce&quot;);  
            $(this).children(&quot;div.desc&quot;).stop().animate({bottom: 0}, 700, &quot;easeOutBounce&quot;);  
        },  
        function(){  
            $(this).children(&quot;div.title&quot;).stop().animate({top: -60}, 500);  
            $(this).children(&quot;div.desc&quot;).stop().animate({bottom: -40}, 400);  
        }  
        );  
      
$(&quot;.title, .desc&quot;).hover(  
        function()  
        {  
            $(this).stop().animate({backgroundColor: &quot;#444&quot;}, 700, &quot;easeOutSine&quot;);  
        },  
        function(){  
            $(this).stop().animate({backgroundColor: &quot;#000&quot;}, 700);  
        }  
        );  
});
[/javascript]

Возможно, это выглядит немного сложно, но на самом деле это не так. Давайте рассмотрим каждую часть.

Логика этого эффекта очень проста. Поскольку мы позиционировали элементы абсолютно, сначала мы прячем их за пределами блока с картинкой. При наведении мыши на изображения, нам нужно просто вернуть их обратно, к изначальному положению.

Сначала мы передвигаем заголовок и описание за пределы родительского блока. Но вместо того, чтобы использовать CSS, мы делаем это помощью JavaScript, по весьма конкретным причинам. Даже если JS будет отключен, страница все равно останется функциональной. Заголовок и описание останутся поверх изображения, и будут выглядеть так, как будто применен эффект наведения. А вот если бы мы скрыли эти блоки с помощью CSS, и JS на странице был бы отключен, то они так бы и не появились на экране.

Наш код начинается с создания функции <strong>hover</strong> для каждого элемента. Первая функция выполняется при наведении мыши, вторая – наоборот, при отведении.

Внутри функции, <strong>this</strong> – указывает на элемент, который вызвал событие. Мы используем метод <strong>animate</strong>, для изменения соответствующих значений. Мы также используем <strong>easing</strong>, для добавления большей привлекательности нашему эффекту. При отведении мыши, мы просто изменяем значения к их изначальному состоянию.

В качестве небольшого дополнения, если навести курсор на блоки с заголовком или описанием, они медленно изменят цвет, спасибо jQuery UI.

Вот и все, наш эффект готов к использованию. Можете посмотреть на <a href="http://dreamhelg.ru/demo/animate-7-steps/code.html">результат</a> и <a href="http://dreamhelg.ru/wp-content/uploads/2010/01/animate.zip">скачать архив</a> с приведенными примерами.

Перевод статьи «<a href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-animations-a-7-step-program/">jQuery Animations: A 7-Step Program</a>», автор <strong>Siddharth</strong>]]></description>
		<wfw:commentRss>http://dreamhelg.ru/2010/01/jquery-animation-a-7-step-program/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Изучаем JQuery. Методы Hide и Show</title>
		<link>http://dreamhelg.ru/2009/08/learning-jquery-hide-and-show-methods/</link>
		<comments>http://dreamhelg.ru/2009/08/learning-jquery-hide-and-show-methods/#comments</comments>
		<pubDate>Tue, 04 Aug 2009 12:27:25 +0000</pubDate>
		<dc:creator>dreamhelg</dc:creator>
				<category><![CDATA[изучаем Jquery]]></category>
		<category><![CDATA[animate]]></category>
		<category><![CDATA[hide]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[show]]></category>

		<guid isPermaLink="false">http://dreamhelg.ru/?p=1008</guid>
		<description><![CDATA[Как вы наверное не раз замечали на различных сайтах, большинство javascript-эффектов, основываются на отображении и скрытии различных элементов страницы. Примеров этому огромное количество: тултипы. выпадающее меню, слайд-шоу и многое другое. [...]]]></description>
		<wfw:commentRss>http://dreamhelg.ru/2009/08/learning-jquery-hide-and-show-methods/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Изучаем JQuery. Изменение CSS-свойств</title>
		<link>http://dreamhelg.ru/2009/07/learning-jquery-inline-css-modifications/</link>
		<comments>http://dreamhelg.ru/2009/07/learning-jquery-inline-css-modifications/#comments</comments>
		<pubDate>Thu, 09 Jul 2009 11:10:56 +0000</pubDate>
		<dc:creator>dreamhelg</dc:creator>
				<category><![CDATA[изучаем Jquery]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://dreamhelg.ru/?p=817</guid>
		<description><![CDATA[Давно в моем блоге не было статей про JQuery. Нет, статьи с его применением были, конечно, но он там выступал в роле вспомогательного инструмента, а рубрика «Изучаем JQuery» тем временем [...]]]></description>
		<wfw:commentRss>http://dreamhelg.ru/2009/07/learning-jquery-inline-css-modifications/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Изучаем JQuery. Составные события</title>
		<link>http://dreamhelg.ru/2009/02/jquery-compound-events/</link>
		<comments>http://dreamhelg.ru/2009/02/jquery-compound-events/#comments</comments>
		<pubDate>Tue, 24 Feb 2009 09:30:52 +0000</pubDate>
		<dc:creator>dreamhelg</dc:creator>
				<category><![CDATA[изучаем Jquery]]></category>
		<category><![CDATA[hover]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[toggle]]></category>

		<guid isPermaLink="false">http://dreamhelg.ru/?p=356</guid>
		<description><![CDATA[В сегодняшней статье мы рассмотрим два наиболее часто употребляемых обработчика событий, методы toggle() и hover(); они оба передают нам сложные обработчики событий, потому что они перехватывают комбинации пользовательских действий и [...]]]></description>
		<wfw:commentRss>http://dreamhelg.ru/2009/02/jquery-compound-events/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Изучаем Jquery. Простые события</title>
		<link>http://dreamhelg.ru/2009/02/jquery-simple-events/</link>
		<comments>http://dreamhelg.ru/2009/02/jquery-simple-events/#comments</comments>
		<pubDate>Fri, 13 Feb 2009 14:00:56 +0000</pubDate>
		<dc:creator>dreamhelg</dc:creator>
				<category><![CDATA[изучаем Jquery]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[events]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://dreamhelg.ru/?p=309</guid>
		<description><![CDATA[Помимо события загрузки страницы, существует много разных случаев, когда нам может понадобится выполнить какую-либо задачу. JavaScript позволяет нам перехватывать событие загрузки страницы с помощью body onload="" или window.onload, он предоставляет [...]]]></description>
		<wfw:commentRss>http://dreamhelg.ru/2009/02/jquery-simple-events/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Селекторы JQuery &#8212; как получить все что вы хотите. Часть 2</title>
		<link>http://dreamhelg.ru/2009/02/jquery3/</link>
		<comments>http://dreamhelg.ru/2009/02/jquery3/#comments</comments>
		<pubDate>Sun, 01 Feb 2009 13:51:50 +0000</pubDate>
		<dc:creator>dreamhelg</dc:creator>
				<category><![CDATA[изучаем Jquery]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[селекторы]]></category>

		<guid isPermaLink="false">http://dreamhelg.ru/?p=213</guid>
		<description><![CDATA[В сегодняшней статье, мы закончим изучение селекторов JQuery, как и в прошлой статье, рассмотрев пару интересных примеров их использования. Прочитав статью, вы научитесь применять селекторы, для стилизации ячеек, строк или [...]]]></description>
		<wfw:commentRss>http://dreamhelg.ru/2009/02/jquery3/feed/</wfw:commentRss>
		<slash:comments>24</slash:comments>
		</item>
		<item>
		<title>Селекторы JQuery &#8212; как получить все что вы хотите</title>
		<link>http://dreamhelg.ru/2009/01/jquery2/</link>
		<comments>http://dreamhelg.ru/2009/01/jquery2/#comments</comments>
		<pubDate>Tue, 20 Jan 2009 10:32:53 +0000</pubDate>
		<dc:creator>dreamhelg</dc:creator>
				<category><![CDATA[изучаем Jquery]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[xpath]]></category>
		<category><![CDATA[селекторы]]></category>

		<guid isPermaLink="false">http://dreamhelg.ru/?p=128</guid>
		<description><![CDATA[В прошлой статье, мы разобрались что именно представляет собой JQuery, где его можно скачать и как подключить, а также простенький пример по раскрашиванию ссылок. В этой статье речь пойдет об [...]]]></description>
		<wfw:commentRss>http://dreamhelg.ru/2009/01/jquery2/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Изучаем JQuery вместе</title>
		<link>http://dreamhelg.ru/2008/12/jquery1/</link>
		<comments>http://dreamhelg.ru/2008/12/jquery1/#comments</comments>
		<pubDate>Wed, 24 Dec 2008 18:59:59 +0000</pubDate>
		<dc:creator>dreamhelg</dc:creator>
				<category><![CDATA[изучаем Jquery]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://dreamhelg.ru/?p=61</guid>
		<description><![CDATA[Давно и всем известно, что если хочешь в чем-то хорошо разобраться нужно начать объяснять это другому человеку. Именно поэтому, практически ничего не зная о JQuery, я решила  написать серию статей [...]]]></description>
		<wfw:commentRss>http://dreamhelg.ru/2008/12/jquery1/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

