Продолжаем изучать jQuery: работа с анимацией. Часть третья.

Немного познакомившись с теорией jQuery, продвинемся на более высокую ступеньку – перейдем к применении наших знаний на практике.

Как решить проблему помещения значительного количества контента на небольшой площади? Одним из способов выполнения такой задачи является так называемая «Гармошка». Она позволяет показать несколько заголовков, каждый из которых содержит параграфы.

Если бы они были отображены все вместе, то для того, чтобы найти определенное место, нужно было бы пролистывать мышкой много текста. А, использование «гармошки», позволяет нам видеть полностью всего один параграф, а остальной текст – в виде заголовков. Нажимая на заголовки, мы открываем необходимый текст.

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

Обозначаем объект – тот текст, который нужно сжать:

<h3>Item 1
        <p>Item 1 content</p>
        <h3>Item 2
        <p>Item 2 content</p>
        <h3>Item 3
        <p>Item 3 content</p>
        <h3>Item 4</h3>
        <p>Item 4 content</p>

Теперь немного CSS:

p,h3 {margin: 0; padding: 0;}
       p {height: 150px; width: 200px; border: 1px solid black;}
       h3 {height: 50px; width: 200px; background-color: blue; color: white; border: 1px solid black;}

Дальше дело за JavaScript. Подключаем jQuery из google CDN, добавляем собственные script-теги внизу страницы, и начинаем:

var headings = $('h3');

Теперь нужно приобщить заголовки к движению. Сначала добавим событие click (клик мышкой):

headings.click(function() {

    });

Прописываем код движения внутри

var cur = $(this); //сохраняем элемент, на который мы нажали (this) для более простой передачи
cur.siblings('p').hide(); //все параграфы (помним функцию siblings) скроем (hide)
cur.next('p').show(); //показывает следующий параграф, который идет после активного заголовка.

И разбиваем построчно

var cur = $(this);

Для обозначения элемента, с которым в данный момент происходит взаимодействие, используют this. Обращаясь к нему, осуществляем запись в качестве переменной cur.

В нашем примере нажимаем на заголовок heading.

cur.siblings('p').hide();

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

cur.next('p').show();

Функция next переводит к элементу, следующему за перепенной cur, то есть к параграфу, следующему после cur. Функция show позволяет его показать.

Следующие необходимые нам функции – slideUp() и slideDown(). С их помощью движение можно сделать скользящим.

С помощью click-функции пишем:

headings.click(function() {
        var cur = $(this); //сохраняем элемент, на который мы нажали (this) для упрощенной передачи
        cur.siblings('p').hide(); //все параграфы (помним функцию siblings) скроем (hide)
        cur.next('p').show(); //показывает следующий параграф, который идет после активного заголовка.
           })

Скрытие и открытие параграфа делаем более плавным: заменяем show() на slideDown() и hide() на slideUp():

headings.click(function() {
        var cur = $(this); //сохраняем элемент, на который мы нажали (this) для упрощенной передачи
        cur.siblings('p').slideUp() //все параграфы (помним функцию siblings) скроем (hide)
        cur.next('p').slideDown(); //показывает следующий параграф, который идет после активного заголовка.
           })

Правда, совсем не сложно?

Источник

tamo

0 Комментариев

Нет комментариев!

Пока нет комментариев, но вы можете стать первым, кто прокомментировал данный пост

Оставить комментарий

Только зарегистрированные пользователи могут оставлять комментарии.