Управляємо видимістю об'єкта за допомогою jQuery
У деяких уроках я вже використав можливості jQuery для управління видимістю об'єктів на веб-сторінці. Так, наприклад, в уроці "Створення шаблону сайту за допомогою блоків". за допомогою jQuery я приховував і показував по кліку мишки лістинг коду.
А почати я хочу з методів управління видимістю - hide (). show () і toggle ().
Ці методи відповідають за видимість елементів, і працюють за наступним принципом:
Спробуйте натискати на кнопки під малюнком:
У цьому прикладі я привласнюю ідентифікатори як кнопках, за допомогою яких буду приховувати або показувати малюнок, так і самому малюнку.
Управляємо видимістю об'єкта за допомогою jQueryСпробуйте натискати на кнопки під малюнком:
У коді jQuery на сторінці myscripts.js я просто відстежую подія кліка по кнопках, і в залежності від того з якої кнопці проведений клік, приховую hide () або показую show () відібраний за ідентифікатором $ ( '# hideImg') об'єкт - мій малюнок .
Насправді приховати елемент можна не тільки методом hide (). але і за допомогою таблиці стилів CSS. Так, якби ми хотіли, щоб при завантаженні сторінки наш малюнок був прихований, то домогтися цього за допомогою таких дій:
Отриманий результат був би однаковий.
До речі, jQuery надає користувачам широкий набір можливостей для керування стилями CSS. але це тема для окремого уроку: "Управляем стилями CSS за допомогою jQuery".
jQuery дозволяє використовувати ці ж методи, що набагато наочніше, з анімацією:
- - hide (speed, callback) - приховати,
- - show (speed, callback) - показати,
- - toggle (speed, callback) - переключити (показати, якщо приховані і навпаки).
Де speed - швидкість зміни висоти, ширини або властивості opacity (прозорість) елемента. Швидкість може приймати три значення: slow (повільно), normal (нормально) або fast (швидко), а також значення в мілісекундах. Сallback - функція, яка буде виконуватися після завершення анімації. Її присутність зовсім необов'язково.
Подивіться приклад з тим же малюнком, тільки приховувати і відображати малюнок я буду за допомогою методу toggle ().
Натисніть на кнопку під малюнком:
Спробуйте натискати на кнопку під малюнком:
Метод toggle. як ви напевно помітили, працює як звичайний перемикач. виконуючи по черзі задану послідовність дій. У цьому прикладі при першому натисканні на кнопку приховує, а при другому відображає малюнок. Пояснення в коді jQuery не повинні викликати у вас особливих питань.
Однією з різновидом управління видимістю об'єктів в jQuery є методи згортання - slideDown (). slideUp () і slideToggle () Ці методи теж відповідають за видимість об'єктів. але працюють за принципом згорнути елемент знизу-вгору. розгорнути елемент зверху-вниз:
А покаже нам це пінгвіненя Tux - символ вільно поширюється програмного забезпечення.
Спробуйте натискати на кнопки під малюнком:
Спробуйте натискати на кнопки під малюнком:
Ці методи також як і методи hide () і show () можна використовувати з анімацією:
- - slideUp (speed, callback) - згорнути,
- - slideDown (speed, callback) - розгорнути,
- - slideToggle (speed, callback) - переключити (розгорнути, якщо приховані і навпаки).
Де speed - швидкість зміни висоти елемента. Швидкість може приймати три значення: slow (повільно), normal (нормально) або fast (швидко), а також значення в мілісекундах. Сallback - функція, яка буде виконуватися після завершення анімації. Її присутність зовсім необов'язково.
Ось той же приклад, тільки приховувати і показувати малюнок я буду за 3 секунди за допомогою методу toggle ().
Натисніть на кнопку під малюнком:
- - fadeTo (speed, opacity, callback) - зменшує властивість opacity (прозорість) до заданого значення,
- - fadeOut (speed, callback) - зменшує властивість opacity (прозорість),
- - fadeIn (speed, callback) - збільшує властивість opacity (прозорість).
Де speed - зміни прозорості елемента. Швидкість може приймати три значення: slow (повільно), normal (нормально) або fast (швидко), а також значення в мілісекундах. Opacity - значення прозорості, до якого воно буде зменшено (число від 0 до 1). Сallback - функція, яка буде виконуватися після завершення анімації. Її присутність зовсім необов'язково.
Методи fadeOut (), fadeIn () і fadeTo ():
Методи fadeOut (), fadeIn () і fadeTo ():
Ну і наостанок хочу вам показати методи управління видимістю об'єкта в jQuery за допомогою анімації - animate () і stop (). А допоможуть мені в цьому кольорові квадрати, за допомогою яких я демонстрував властивості z-inex в уроці "Досліджуємо властивість z-index за допомогою jQuery" і "Управляем становищем шару за допомогою z-index".
метод:
- animate (params, options) - анімує стильові властивості.
Де params - атрибути css. які хочемо анімувати ( "width", "top", "border".).
Options - властивості анімації (в тому числі швидкість).
метод:
- stop () - зупиняє анімацію.
- - властивості повинні бути позначені без пробілів, наступне слово з великої літери, тобто "BorderWidth" замість "border-width",
- - підтримуються тільки ті властивості, значення яких виражаються числами.
- - також в якості значень властивостей можуть бути використані значення "hide". "Show" і "toggle" ".
Такий ось вийшов довгий урок. Поексперементіруйте з методами які надає jQuery для управління видимістю об'єктів. Якщо у вас виникнуть питання, будь ласка, задавайте.
А як можна на одне кнопку наприклад "далі", плавно прибирати одне зображення і на його місці показувати інше. Типу простий фото галереї?
статті
HTML і CSS
PHP і MYSQL
SEO
Пошук по сайту jQuery + AJAX + PHP + MySQL
Пошук по сайту AJAX + PHP + MySQL (AJAX)
Як зробити і встановити на сайт анімований фавікон
Пошук по сайту AJAX + PHP + MySQL (PHP + MySQL)
