Jq примеры. Впечатляющие анимационные эффекты

Вы здесь: Интерьер

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; }); }); Галерея изображений
    Простейший пример реализации галереи, без перезагрузки страницы. (см. )
    
    Для начала добавим тэг в заголовки
    По клику на изображения в
    Выполняем следующие действия.
    
    В этой статье познакомимся с сокращёнными AJAX методами jQuery: load, get, getJSON, getScript и post. Эти методы позволяют очень просто осуществлять необходимые AJAX запросы и в отличие от функции ajax, для их написания требуется меньшее количество строчек кода.
    jQuery - метод load
    Метод load предназначен для получения данных с сервера по указанному адресу URL и помещения их в один или несколько выбранных элементов.
    
    Метод load имеет следующий синтаксис:
    Load(url [,data] [,complete]) // параметры в квадратных скобках являются необязательными //url - строка, содержащая URL адрес, на который необходимо отправить запрос //data (необязательный параметр) - данные, которые необходимо послать на сервер (в формате строки или объекта) //complete – дополнительные действия, которые необходимо выполнить после завершения запроса (указываются посредством функции Function(responseText, textStatus, xhr) ) // responseText - ответ сервера // textStatus - статус ответа // xhr - XMLHTTPRequest объект
    В большинстве случаев для отправки запроса метод load использует GET. Но он также может использовать и метод POST. Это происходит только тогда, когда данные для отправки на сервер указываются не в формате строки, а посредством объекта.
    Примеры использования метода load
    1. Вставить содержимое файла asidenav.tpl в блок c id="asidenav" после загрузки DOM страницы:
    ... // после загрузки DOM страницы $(function() { // вставить в элемент (#asidenav) контент файла asidenav.tpl // если файл не находится в той же директории что и HTML документ, то необходимо дополнительно указать путь к нему $("#asidenav").load("asidenav.tpl"); });
    2. Загрузить часть файла demo.html в элемент при клике по кнопке, расположенной в нём:
    Получить контент файла demo.html ... $("#ajaxclick").click(function(){ // загрузить в элемент id="content1" часть файла demo.html (#content1) $(this).parent().load("demo.html #content1"); });
    Контент файла demo.html:
    Файл demo.html ... ...
    3. Загрузить в элемент, имеющий id="result" ответ content.php . Данный ответ будет зависеть от значения атрибута data-content , которое имеет кнопка, пославшая AJAX-запрос на сервер.
    Загрузить содержимое 1 Загрузить содержимое 2 Загрузить содержимое 3 ... // при нажатии на кнопку, имеющую класс load-ajax-click $(".load-ajax-content").click(function(){ // определим значение атрибута data-content var dataContent = $(this).attr("data-content"); // запросим данные из файла, с использованием значения атрибута data-content, и выведем их в элемент id="result" if (dataContent) { $("#result").load("content.php","content="+dataContent); } });

Выбор редакции

Поделки из морских камней – фото и идеи для творческих натур

Что можно сделать из гальки своими руками? Воспользуйтесь этими идеями, и вы увидите, что камень – идеальный материал для декора.Морские...

Листья деревьев с названиями фото

Печальная красота осени, сотни оттенков золота, яркие красные пятна кленов, нежно-розовые бересклеты… Так хорошо сидеть ясным октябрьским...

Как правильно залить ленточный фундамент под дом своими руками?

Строительство частного дома всегда начинается с подготовки и заливки фундамента. Обустройство основания дома – один из самых важных и...

Как сделать подсветку для рассады своими руками

Подсветка для рассады как и что выбирать Энергосберегающие Люминесцентные Фитолампы Отражатели света Подсветка для рассады лампами и...

Правила посадки яблонь весной: когда сажать, как сажать, основные ошибки при посадке Где лучше посадить яблоню на участке

Яблоки нравятся практически всем людям. Но получить их урожай самостоятельно в любом случае приятнее, нежели приобретать в магазине...

Как сделать септик из покрышек своими руками Дачная канализация из покрышек

Трудно назвать комфортным проживание без правильно работающей канализации, представляющей собой систему удаления сточных вод. Городские...

Как установить фильтр для воды Как подключить проточный фильтр

Цугунов Антон ВалерьевичВремя на чтение: 6 минут Изношенность коммунальных систем привела к низкому качеству воды, подаваемой в...

Как правильно установить фильтр для очистки воды: советы и рекомендации Установка фильтра для воды своими руками

Вода – это источник жизни и здоровья. Но принести пользу человеку может только чистая вода. Чтобы избавиться от лишних химических...

Зачем нужна защита пера и как ее сделать своими руками

Горный велосипед Основными особенностями горного велосипеда являются широкие (1.5 - 2.5 дюймов, вместо обычных 20-40 мм) колеса, чуть...

Новое