Впечатляющие анимационные эффекты. Примеры использования jQuery Jquery описание примеры

JQuery – это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение – лучше всего начинать с наглядных примеров, и они далее…

Материалы данной статьи включены в учебник « ». Учебник распространяется бесплатно, и сопровождается интерактивными .

Как же все-таки работает jQuery?

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

А основные моменты Вам поможет понять следующая диаграмма:

Как получить элемент с помощью jQuery?

Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивается селектор jQuery:

$(“#header”) – получение элемента с id=”header”
$(“h3”) – получить все элементы
$(“div#content .photo”) – получить все элементы с классом =”photo” которые находятся в элементе div с id=”content”
$(“ul li”) – получить все
элементы из списка
- $(“ul li:first”) – получить только первый элемент
- из списка Выдвижная панель
  Начнем с простенького примера – слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. )
  
  Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между “active” и “btn-slide”), а панелька с id=”panel” будет выдвигаться/прятаться. (класс “active” изменяет позицию фонового изображения, см. CSS файл во вложении).
  $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); }); });
  Магические исчезновения
  Этот пример покажет как можно красиво и легко убирать растворять элементы (см. ):
  
  Когда мы кликаем по картинке , будет найден родительский элемент , и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:
  $(document).ready(function(){ $(".pane .delete").click(function(){ $(this).parents(".pane").animate({ opacity: "hide" }, "slow"); }); });
  Связанная анимация
  Теперь пример посложнее, но он поможет Вам лучше понять jQuery. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность. (см. ):
  
  Line 0: когда прогрузилась страница (DOM готов к манипуляциям)
  Line 1: привязываемся к событию click для элемента
  Line 2: манипулируем элементом – уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)
  Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром: “slow”, “normal”, “fast” или в миллисекундах
  Line 4: затем opacity=1, left=0, height=100, width=100, скорость – “slow”
  Line 5: затем top=0, скорость – “fast”
  Line 6: затем slideUp (с дефолтной скоростью анимации – “normal”)
  Line 7: затем slideDown, скорость – “slow”
  Line 8: возвращаем false для того чтобы браузер не перешел по ссылке
  $(document).ready(function(){ $(".run").click(function(){ $("#box").animate({opacity: "0.1", left: "+=400"}, 1200) .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow") .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow") .animate({top: "0"}, "fast") .slideUp() .slideDown("slow") return false; }); });
  Гармошка #1
  Пример реализации “гармошки”. (см. )
  
  Теперь приступим к разбору полетов:
  Первой строчкой мы добавляем класс “active” первому элементу внутри (класс”active” отвечает за позиционирования фонового рисунка – иконки со стрелочкой). Во второй строчке мы прячем все не первые
  Элементы внутри .
  Когда происходит клик по заголовку , для следующего в нём элемента
  Будет применен эффект slideToggle, затем для всех остальных элементов
  Будет применен эффект slideUp. Следующие действие изменяет класс заголовка на “active”, затем ищем все остальные заголовки и убираем у них класс “active”
  $(document).ready(function(){ $(".accordion h3:first").addClass("active"); $(".accordion p:not(:first)").hide(); $(".accordion h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); }); });
  Гармошка #2
  Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. )
  
  В CSS у нас указано для всех элементов
  Display:none. Теперь нам необходимо открыть третью панель. Для этого мы можем написать следующее $(“.accordion2 p”).eq(2).show(), где eq обозначает равенство. Помните, что индексирование начинается с нуля:
  $(document).ready(function(){ $(".accordion2 h3").eq(2).addClass("active"); $(".accordion2 p").eq(2).show(); $(".accordion2 h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); }); });
  Анимация для события hover #1
  Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это ?), (см. ):
  
  Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента , и анимируется его прозрачность и расположение:
  $(document).ready(function(){ $(".menu a").hover(function() { $(this).next("em").animate({opacity: "show", top: "-75"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast"); }); });
  Анимация для события hover #2
  Данный пример чуть-чуть посложней предыдущего примера: для формирования подсказки используется атрибут linktitle (см. )
  
  Первым делом добавим тэг в каждый элемент . Когда произойдет событие mouseover, мы возьмем текст из атрибута “thetitle” и сохраним его в переменной “hoverText”, затем этот текст будет вставлен в тэг :
  $(document).ready(function(){ $(".menu2 a").append(""); $(".menu2 a").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); }); });
  Кликабельные блоки
  Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. ):
  
  Создадим список
  - кликабельными. Для начала привяжемся к событию click для элемента “.pane-list li”; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга и сделает редирект на страницу указанную в атрибуте href.
    $(document).ready(function(){ $(".pane-list li").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); });
    Складывающиеся панельки
    Ну а теперь чуть-чуть скомбинируем предыдущие примеры и создадим ряд складывающихся панелек (наподобие как в Gmail организован inbox). (см. )
    - клик по – вызывает метод slideUp для всех
    - клик по , так же вызывается метод slideDown для всех
    - послепятого
    - клик по – скрывает элемент, и отображает , так же вызывается метод slideUp для всех
    - после пятого
    $(document).ready(function(){ //hide message_body after the first one $(".message_list .message_body:gt(0)").hide(); //hide message li after the 5th $(".message_list li:gt(4)").hide(); //toggle message_body $(".message_head").click(function(){ $(this).next(".message_body").slideToggle(500) return false; }); //collapse all messages $(".collpase_all_message").click(function(){ $(".message_body").slideUp(500) return false; }); //show all messages $(".show_all_message").click(function(){ $(this).hide() $(".show_recent_only").show() $(".message_list li:gt(4)").slideDown() return false; }); //show recent messages only $(".show_recent_only").click(function(){ $(this).hide() $(".show_all_message").show() $(".message_list li:gt(4)").slideUp() return false; }); }); Имитация Backend’a WordPress’a
    Я думаю многие из читателей сталкивались с админской частью wordpress’a, точнее с редактирование комментариев. Попробуем сделать что-то подобное. Для анимации фонового цвета нам понадобиться соответствующий плагин для jQuery . (см. )
    - клик по инициирует появление сообщения (alert), так же происходит анимация фонового цвета и прозрачности (backgroundColor и opacity) для
    - клик по – вызывает анимацию фона у (цвет изменяется на желтый и обратно) и добавляет класс “spam”
    - клик по – вызывает анимацию фона у (цвет изменяется на зеленый и обратно) и удаляет класс “spam”
    - клик по – вызывает анимацию фона у (цвет изменяется на красный), и изменяет параметр “opacity” на “hide”
    //don"t forget to include the Color Animations plugin $(document).ready(function(){ $(".pane:even").addClass("alt"); $(".pane .btn-delete").click(function(){ alert("This comment will be deleted!"); $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast") .animate({ opacity: "hide" }, "slow") return false; }); $(".pane .btn-unapprove").click(function(){ $(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast") .animate({ backgroundColor: "#ffffff" }, "slow") .addClass("spam") return false; }); $(".pane .btn-approve").click(function(){ $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast") .animate({ backgroundColor: "#ffffff" }, "slow") .removeClass("spam") return false; }); $(".pane .btn-spam").click(function(){ $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast") .animate({ opacity: "hide" }, "slow") return false; }); }); Галерея изображений
    Простейший пример реализации галереи, без перезагрузки страницы. (см. )
    
    Для начала добавим тэг в заголовки
    По клику на изображения в
    Выполняем следующие действия.
    
    Используя jQuery Вы сможете создавать скрипты намного быстрее и эффективнее.
    Что такое jQuery?
    jQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода.
    
    Девиз jQuery "write less, do more" (пиши меньше, делай больше) отражает ее главное предназначение.
    
    jQuery позволяет создавать анимацию, обработчики событий, значительно облегчает выбор элементов в DOM и создание AJAX запросов.
    
    Данная библиотека работает со всеми браузерами (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome ). Это значит, что Вам больше не нужно будет беспокоиться о кроссбраузерной совместимости JavaScript кода.
    
    Для jQuery написано огромное количество плагинов, которые позволяют расширить ее возможности еще больше.
    Пример использования jQuery
    $(document).ready(function(){ $(":button").click(function(){ $(":button").hide(); $("#wrap1").addClass("add"); $("#wrap1").animate({height:280},2000); $("#wrap1").animate({width:400},2000); $("#wrap1").animate({padding:20},2000,function(){ $("#text1").hide(2000,function(){$("#text2").show(2000);}); }); }); });
    Быстрый просмотр
    Добавление jQuery на страницы
    Для того, чтобы начать использовать jQuery необходимо:
  - Скачать ее с официального сайта . Существуют две версии jQuery: для использования в готовых приложениях (production) и для разработки (development). Версия для разработки содержит комментарии и структурированный код. В сокращенной версии нет комментариев и код в ней не структурирован зато она занимает меньше места и поэтому страницы с ней будут загружаться быстрее. После того, как Вы выберите подходящую версию нажмите на кнопку "Download (jQuery)"