В этой статье мы увидим, как использовать различные методы JQuery для создания анимации.
hide() И show()Метод hide() просто устанавливает встроенный стиль. display: none для выбранных предметов. И наоборот, метод show() восстанавливает свойства отображения.
Давайте посмотрим пример:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>В первом случае абзац скрывается при нажатии на кнопку (hide-btn), во втором случае абзац показывается при нажатии на кнопку (show-btn).
Вы также можете указать параметр продолжительности, чтобы анимировать эффект отображения и скрытия в течение определенного периода времени.
Продолжительность может быть указана с помощью одной из предварительных строкdefiконечны 'slow' o 'fast', или в нескольких миллисекундах, для большей точности; более высокие значения указывают на более медленную анимацию.
<script>
$(document).ready(function(){
// Hide displayed paragraphs with different speeds
$(".hide-btn").click(function(){
$("p.normal").hide();
$("p.fast").hide("fast");
$("p.slow").hide("slow");
$("p.very-fast").hide(50);
$("p.very-slow").hide(2000);
});
// Show hidden paragraphs with different speeds
$(".show-btn").click(function(){
$("p.normal").show();
$("p.fast").show("fast");
$("p.slow").show("slow");
$("p.very-fast").show(50);
$("p.very-slow").show(2000);
});
});
</script>Строка predefiНита 'fast' указывает продолжительность 200 миллисекунд, а строка 'slow' указывает продолжительность 600 миллисекунд.
Мы можем указать функцию callback для выполнения после завершения метода show() или " hide()
<script>
$(document).ready(function(){
// Display alert message after hiding paragraphs
$(".hide-btn").click(function(){
$("p").hide("slow", function(){
// Code to be executed
alert("The hide effect is completed.");
});
});
// Display alert message after showing paragraphs
$(".show-btn").click(function(){
$("p").show("slow", function(){
// Code to be executed
alert("The show effect is completed.");
});
});
});
</script>Метод jQuery toggle() отображать или скрывать элементы таким образом, что если элемент изначально отображается, он будет скрыт; и наоборот, если он скрыт, он будет отображаться (практически переключает его видимость).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Точно так же можно указать параметр duration для метода toggle(), таким образом, чтобы анимировать переход между видимым и скрытым, как методы show() e hide()
<script>
$(document).ready(function(){
// Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").toggle();
$("p.fast").toggle("fast");
$("p.slow").toggle("slow");
$("p.very-fast").toggle(50);
$("p.very-slow").toggle(2000);
});
});
</script>Точно так же вы также можете указать функцию callback для метода toggle().
<script>
$(document).ready(function(){
// Display alert message after toggling paragraphs
$(".toggle-btn").click(function(){
$("p").toggle(1000, function(){
// Code to be executed
alert("The toggle effect is completed.");
});
});
});
</script>fadeIn() e fadeOut()Вы можете использовать методы jQuery fadeIn()e fadeOut() чтобы показать или скрыть элементы HTML, постепенно увеличивая или уменьшая их непрозрачность и создавая эффект затухания.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});
// Fading in hidden paragraphs
$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>Как и в других методах эффектов jQuery, вы можете дополнительно указать параметр продолжительности или скорости для методов. fadeIn()e fadeOut(), чтобы контролировать продолжительность затухания. Продолжительность может быть указана с помощью одной из предварительных строкdefiконечны 'slow' o 'fast', или в миллисекундах; более высокие значения указывают на более медленную анимацию.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs with different speeds
$(".out-btn").click(function(){
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading in hidden paragraphs with different speeds
$(".in-btn").click(function(){
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
});
</script>эффект от методов fadeIn() / fadeOut() это похоже на show() / hide(), но в отличие от методов show() / hide(), первые анимируют только непрозрачность целевых элементов и не анимируют их размер.
Также вы можете указать функцию callback для запуска после завершения методов fadeIn() / fadeOut().
<script>
$(document).ready(function(){
// Display alert message after fading out paragraphs
$(".out-btn").click(function(){
$("p").fadeOut("slow", function(){
// Code to be executed
alert("The fade-out effect is completed.");
});
});
// Display alert message after fading in paragraphs
$(".in-btn").click(function(){
$("p").fadeIn("slow", function(){
// Code to be executed
alert("The fade-in effect is completed.");
});
});
});
</script>fadeToggle()Метод jQuery fadeToggle() отображает или скрывает выбранные элементы, анимируя их непрозрачность таким образом, что если элемент изначально отображается, он исчезает; если он был скрыт, он исчезнет (т. Е. Включит эффект затухания).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Вы также можете указать параметр времени жизни для метода fadeToggle() что касается методов fadeIn() / fadeOut(), чтобы управлять продолжительностью или скоростью анимации затухания.
<script>
$(document).ready(function(){
// Fade Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").fadeToggle();
$("p.fast").fadeToggle("fast");
$("p.slow").fadeToggle("slow");
$("p.very-fast").fadeToggle(50);
$("p.very-slow").fadeToggle(2000);
});
});
</script>Метод fadeToggle() также имеет возможность указать функцию callback.
<script>
$(document).ready(function(){
// Display alert message after fade toggling paragraphs
$(".toggle-btn").click(function(){
$("p").fadeToggle(1000, function(){
// Code to be executed
alert("The fade-toggle effect is completed.");
});
});
});
</script>fadeTo()Метод jQuery fadeTo() это похоже на метод fadeIn(), но в отличие от метода fadeIn(), метод fadeTo() позволяет смешивать элементы до определенного уровня непрозрачности.
$(selector).fadeTo(speed, opacity, callback);Обязательный параметр opacity определяет конечную непрозрачность целевых элементов, которая может быть числом от 0 до 1. Параметр duration o speed это также требуется для этого метода, который определяет продолжительность затухания анимации.
<script>
$(document).ready(function(){
// Fade to paragraphs with different opacity
$(".to-btn").click(function(){
$("p.none").fadeTo("fast", 0);
$("p.partial").fadeTo("slow", 0.5);
$("p.complete").fadeTo(2000, 1);
});
});
</script>slideUp() e slideDown()Метод jQuery slideUp() e slideDown() они используются для скрытия или отображения элементов HTML путем постепенного уменьшения или увеличения их высоты (т. е. прокрутки вверх или вниз).
<script>
$(document).ready(function(){
// Slide up displayed paragraphs
$(".up-btn").click(function(){
$("p").slideUp();
});
// Slide down hidden paragraphs
$(".down-btn").click(function(){
$("p").slideDown();
});
});
</script>Как и другие методы эффектов jQuery, вы можете дополнительно указать параметр продолжительности или скорости для методов. slideUp() e slideDown() для управления продолжительностью анимации слайдов. Продолжительность может быть указана с помощью одной из предварительных строкdefiконечны 'slow' o 'fast', или в миллисекундах; более высокие значения указывают на более медленную анимацию.
<script>
$(document).ready(function(){
// Sliding up displayed paragraphs with different speeds
$(".up-btn").click(function(){
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(2000);
});
// Sliding down hidden paragraphs with different speeds
$(".down-btn").click(function(){
$("p.normal").slideDown();
$("p.fast").slideDown("fast");
$("p.slow").slideDown("slow");
$("p.very-fast").slideDown(50);
$("p.very-slow").slideDown(2000);
});
});
</script>Вы также можете указать функцию обратного вызова для выполнения после завершения метода. slideUp() o slideDown().
<script>
$(document).ready(function(){
// Display alert message after sliding up paragraphs
$(".up-btn").click(function(){
$("p").slideUp("slow", function(){
// Code to be executed
alert("The slide-up effect is completed.");
});
});
// Display alert message after sliding down paragraphs
$(".down-btn").click(function(){
$("p").slideDown("slow", function(){
// Code to be executed
alert("The slide-down effect is completed.");
});
});
});
</script>slideToggle()Метод jQuery slideToggle() показать или скрыть выбранные элементы, анимировав их высоту, так что если элемент изначально отображается, он будет прокручиваться вверх; если скрыт, то будет прокручиваться вниз, т.е. переключаться между методами slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Точно так же вы можете указать параметр времени жизни для метода slideToggle() как slideUp() e slideDown().
<script>
$(document).ready(function(){
// Slide Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").slideToggle();
$("p.fast").slideToggle("fast");
$("p.slow").slideToggle("slow");
$("p.very-fast").slideToggle(50);
$("p.very-slow").slideToggle(2000);
});
});
</script>Точно так же вы также можете указать функцию обратного вызова для метода slideToggle().
<script>
$(document).ready(function(){
// Display alert message after slide toggling paragraphs
$(".toggle-btn").click(function(){
$("p").slideToggle(1000, function(){
// Code to be executed
alert("The slide-toggle effect is completed.");
});
});
});
</script>animate()Метод jQuery animate() он используется для создания пользовательских анимаций. Метод animate() используется для анимации числовых свойств CSS, таких как width, height, margin, padding, opacity, top, left и т.п. но нечисловые свойства, такие как color o background-color их нельзя анимировать с помощью базовой функциональности jQuery.
Основной синтаксис метода animate() è la seguente:
$(selector).animate({ properties }, duration, callback);Параметры метода animate() имеют следующие значения:
'slow' o 'fast', или в миллисекундах; более высокие значения указывают на более медленную анимацию.Ниже приведен простой пример метода animate() который анимирует изображение из исходного положения вправо на 300 пикселей при нажатии кнопки.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Вы также можете одновременно анимировать несколько свойств элемента, используя метод animate(). Все свойства были анимированы одновременно без каких-либо задержек.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Вы также можете анимировать несколько свойств элемента по одному по отдельности в очереди, используя функцию конкатенации jQuery.
В следующем примере показана анимация jQuery, поставленная в очередь или цепочка, где каждая анимация запускается после завершения предыдущей анимации элемента. Мы увидим функцию конкатенации в следующей статье.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.5});
});
});
</script>Также возможно defiокончательные относительные значения для анимированных свойств. Если значение указано с префиксом += o -=целевое значение вычисляется путем добавления или вычитания указанного числа из текущего значения свойства.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>В дополнение к числовым значениям каждое свойство может принимать строки. 'show', 'hide' e 'toggle'. Это будет очень полезно в ситуации, когда вы просто хотите анимировать свойство от его текущего значения до его начального значения и наоборот.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Метод jQuery stop() используется для остановки запущенных в данный момент анимаций или эффектов jQuery для выбранных элементов до их завершения.
Основной синтаксис метода stop() jQuery можно задать с помощью:
$(selector).stop(stopAll, goToEnd);Параметры в приведенном выше синтаксисе имеют следующие значения:
false, это означает, что будет остановлена только текущая анимация, остальные анимации в очереди будут выполнены позже.false.Вот простой пример, демонстрирующий метод stop() в реальном действии, где вы можете запускать и останавливать анимацию нажатием кнопки.
<script>
$(document).ready(function(){
// Start animation
$(".start-btn").click(function(){
$("img").animate({left: "+=150px"}, 2000);
});
// Stop running animation
$(".stop-btn").click(function(){
$("img").stop();
});
// Start animation in the opposite direction
$(".back-btn").click(function(){
$("img").animate({left: "-=150px"}, 2000);
});
// Reset to default
$(".reset-btn").click(function(){
$("img").animate({left: "0"}, "fast");
});
});
</script>Вот еще один пример этого метода, где, если вы снова нажмете кнопкуSlide Toggle” после запуска анимации, но до ее завершения, анимация сразу начнется в направлении, противоположном сохраненной начальной точке.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>При создании анимированного эффекта наведения одна из наиболее распространенных проблем, с которой вы можете столкнуться, — это несколько анимаций в очереди, когда вы быстро наводите и удаляете курсор мыши. Почему в данной ситуации mouseenter GLI mouseleave события запускаются быстро до завершения анимации. Чтобы избежать этой проблемы и создать красивый и плавный эффект наведения, вы можете добавить stop(true, true)в цепочку методов, например:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Операторы JavaScript выполняются построчно. Однако, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока работает предыдущий эффект. Чтобы этого не произошло, jQuery предоставляет функцию обратного вызова для каждого метода эффекта.
Функция обратного вызова — это функция, которая запускается после завершения эффекта. Функция обратного вызова передается в качестве аргумента методам эффекта, и они обычно появляются в качестве последнего аргумента метода. Например, базовый синтаксис метода эффекта jQuery slideToggle() с функцией обратного вызова, которая может быть указана следующим образом:
$(selector).slideToggle(duration, callback);Рассмотрим следующий пример, где мы разместили операторы slideToggle()e alert()один рядом с другим. Если вы попробуете этот код, предупреждение появится сразу после нажатия кнопки переключения, не дожидаясь завершения эффекта переключения слайдов.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>А вот модифицированная версия предыдущего примера, где мы вставили оператор alert() внутри функции обратного вызова для метода slideToggle(). Если вы попробуете этот код, предупреждающее сообщение появится после завершения эффекта переключения слайдов.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>Точно так же вы можете defiзавершить функции обратного вызова для других методов эффекта jQuery, таких как show(), hide(), fadeIn(), fadeOut(), animate()И т.д..
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>Если вы попробуете приведенный выше пример кода, вы получите одно и то же предупреждающее сообщение дважды по одному разу для каждого элемента. <h1> e <p>, после нажатия на кнопку активации.
BlogInnovazione.it
Военно-морской сектор является настоящей глобальной экономической державой, которая достигла 150-миллиардного рынка...
В прошлый понедельник Financial Times объявила о сделке с OpenAI. FT лицензирует свою журналистику мирового уровня…
Миллионы людей платят за стриминговые сервисы, выплачивая ежемесячную абонентскую плату. Распространено мнение, что вы…
Coveware от Veeam продолжит предоставлять услуги по реагированию на инциденты, связанные с кибер-вымогательством. Coveware предложит возможности криминалистики и исправления…