JQuery основы. Методы: fadeOut, fadeIn, fadeTo, slideUp, slideDown. Часть 4

Ромчик
0

Изучаем jquery

Доброго времени суток. Мы с Вами продолжаем рассматривать основные действия над элементами в jQuery. Так в прошлой статье мы рассмотрели методы взаимодействия с текстом элемента, методы скрытия и отображения элемента, методы взаимодействия на высоту и ширину элементов, а также метод html при помощи, которого можно вытаскивать и изменять html-код элемента. Ну, что ж давайте продолжим.

Так в прошлой статье мы рассмотрели два метода show и hide, которые показывали и скрывали элемент. Но делали это без каких либо эффектов, но в jQuery есть методы, которые выполняют аналогичные действия только с эффектами.

Метод fadeOut()

Метод fadeOut(time, function) служит для плавного исчезновения элемента (элемент меняет свою прозрачность, вплоть до полного исчезновения). В качестве параметров принимает:

  • time — время исчезновения
  • function — функция, которая будет выполнена после исчезновения элемента

Например, есть у нас html-код:

<div id='text'>
 Привет.
</div>

Мы хотим, чтоб элемент div с id=text плавно исчез. Для этого напишем следующий код:

$(document).ready(function(){
 $('#text').fadeOut(2000);
})

Метод fadeIn()

Метод fadeIn(time, function) служит для плавного появления элемента. Элемент меняет свою прозрачность до полной видимости. В качестве параметров принимает:

  • time — время появления
  • function — функция, которая будет выполнена после исчезновения элемента
$(document).ready(function(){
 $('#text').fadeIn(2000);
})

Метод fadeTo()

Метод fadeTo(time, opacity, function) — позволяет изменить степень прозрачности элемента до определенной величины. В качестве параметров принимает:

  • time — время изменнения
  • opacity — степень прозрачности от 0 до 1
  • function — функция, которая будет выполнена после исчезновения элемента

Пример:

$(document).ready(function(){
 $('#text').fadeTo(2000, 0.5);
})

Метод slideUp()

Метод slideUp(time, function) позволяет исчезнуть элементу путем уезжая наверх. В  качестве параметров принимает:

  • time — время появления
  • function — функция, которая будет выполнена после исчезновения элемента

Пример:

$(document).ready(function(){
 $('#text').slideUp(2000);
})

Метод slideDown()

Метод slideDown(time, function) позволяет показать элемент. Элемент как бы выезжает вниз. В качестве параметров принимает:

  • time — время появления
  • function — функция, которая будет выполнена после исчезновения элемента

Пример:

$(document).ready(function(){
 $('#text').slideDown(2000);
})

На этом данную статью я завершаю. Мы с Вами рассмотрели основные методы для работы с элементами в jQuery, а точнее способы jQuery для отображения и скрытия элементов с различными эффектами. А в следующих постах мы рассмотрим методы jQuery позволяющие работать с атрибутами элементов, добавлять(удалять) классы элементов и многие другие.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2017 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика