jQuery эффекты
На этом уроке, мы рассмотрим эффекты в jQuery – это такие методы, как hide, show, toggle, slide, fade и animate.
Создадим тестовый блок для демонстрации примеров jQuery методов, применяемых для создания различных эффектов и стилизуем его.
<div id="test"></div>
#test {
background:#bdfa02;
height:100px;
width:200px;
position:absolute;
}
Для запуска эффектов нам потребуются кнопки с разными классами. Мы будем обращаться к каждой кнопке по названию класса и вешать на неё определенное действие.
jQuery анимация
Рассмотрим, как можно анимировать элементы на странице, изменяя их стили. Например изменим ширину у блока, прибавив к текущей ширине 150 пикселей. Создадим кнопку, при клике по которой, наш блок плавно вытянется вправо.
<button class="changeWidth">Изменить ширину</button>
По событию клик по кнопке с классом changeWidth мы запускаем функцию, внутри которой выбираем наш тестовый блок #test и применяем к нему метод animate. Метод animate изменяет CSS свойство с анимацией, делает это плавно. Он принимает на себя два параметра: объект, где мы изменяем ширину (CSS свойство) и скорость анимации. Прямоугольник может двигаться ещё медленнее, тоесть за 2 секунды он изменит свою ширину до 350 пикселей.
$(document).ready(function(){
$(".changeWidth").click(function(){
$("#test").animate({width: '350px'}, 2000);
});
});
jQuery скрыть / показать
Метод hide()
<button class="hideBtn">Скрыть</button>
При клике по кнопке с классом hideBtn, запускаем функцию, внутри которой выбираем наш блок и скрываем его в течении 1 секунды.
$(".hideBtn").click(function(){
$("#test").hide(1000);
});
Метод show()
Показывает элемент на странице, который мы только-что скрыли.
<button class="showBtn">Показать</button>
$(".showBtn").click(function(){
$("#test").show(2000);
});
Метод fadeout()
Плавно растворяет элемент, делая его полностью прозрачным.
<button class="fadeOut">Скрыть(fadeOut)</button>
К нашему блоку применяем метод fadeout, передавая в параметрах скорость исчезновения – 2 секунды.
$(".fadeOut").click(function(){
$("#test").fadeOut(2000);
});
Метод fadeIn()
Плавно меняет прозрачность элемента до полной его видимости (для работы эффекта элемент должен быть изначально скрыт). Действует противоположным образом.
<button class="fadeIn">Показать(fadeIn)</button>
$(".fadeIn").click(function(){
$("#test").fadeIn(2000);
});
У обоих методов по умолчанию, скорость проявления / растворения равна 400, поэтому в параметрах можно ничего не передавать. Все равно процесс будет происходить более-менее плавно.
Метод fadeToggle()
Если элемент скрыт, то данная функция отображает его (используя метод show). Если элемент видимый — скрывает его (используя метод hide).
<button class="fadeToggle">Переключить(fadeToggle)</button>
$(".fadeToggle").click(function(){
$("#test").fadeToggle(1000);
});
Метод slideUp()
Плавное исчезновение элемента, за счет уменьшения его высоты. Элемент скользит вверх, теряя высоту.
<button class="slideUp">Скрыть(slideUp)</button>
$(".slideUp").click(function(){
$("#test").slideUp();
});
Метод slideDown()
Появление элемента, за счет увеличения его высоты.
<button class="slideDown">Показать(slideDown)</button>
$(".slideDown").click(function(){
$("#test").slideDown();
});
Метод slideToggle()
Переключает видимость элементов, используя эффект изменения их высоты.
<button class="slideToggle">Переключить(slideToggle)</button>
$(".slideToggle").click(function(){
$("#test").slideToggle();
});
Заключение
Методы fadeOut, fadeIn и fadeToggle, элегантнее аналогичных методов, скрывают и показывают элементы.
See the Pen jQuery effects by porsake (@porsake) on CodePen.
-
Создано 22.02.2019 10:00:17
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.