jQuery Academy · Урок

jQuery и анимации

«jQuery и анимации» — бесплатный урок jQuery Academy на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 1 уроков всего.

Введение

Здравствуйте!

В этом разделе мы изучим анимацию с помощью jQuery.

Начнём.

Методы show и hide

Методы show() и hide()

С помощью методов show и hide мы можем показывать и скрывать объект DOM на экране.

<h1 id="target">Hello Coddy</h1>	
<button id="show">Show</button>	
<button id="hide">Hide</button>	

<script>
/*
hide method hides target 
element from DOM.
*/
$('#hide').on('click', function(){
   $('#target').hide();
})

/*
show method shows the 
target element in the DOM.
*/
$('#show').on('click', function(){
  $('#target').show();
});

</script>

Метод toggle

Метод toggle()

Кроме того, существует метод toggle(), назначение которого можно понять из названия. С помощью этого метода скрытый элемент показывается, а показанный скрывается.

<h1 id="target">Hello Coddy</h1>	
<button id="toggle">Toggle</button>	

<script>
/*
toggle() method shows or hides the 
target element in the DOM.
*/
$('#toggle').on('click', function(){
  $('#target').toggle();
});
</script>

fadein и fadeout

Методы fadeIn() и fadeOut()

Теперь рассмотрим методы fadeIn и fadeOut, которые с анимацией показывают и скрывают HTML-элементы.

Методы fadeIn и fadeOut необязательно принимают числовое значение в миллисекундах. Оно определяет длительность анимации в миллисекундах. Если аргумент не передан, используется значение по умолчанию.

<h1 id="target">Hello Coddy</h1>	
<button id="show">Show with Animation</button>	
<button id="hide">Hide with Animation</button>	

<script>
/*
fadeOut method hides target 
element from DOM with Animation
*/
$('#hide').on('click', function(){
   $('#target').fadeOut();
})

/*
fadeIn method shows the 
target element in the DOM with Animation
*/
$('#show').on('click', function(){
  $('#target').fadeIn();
});

</script>

fadein и fadeout

fadeOut уменьшает непрозрачность элементов в течение определённого времени. Когда непрозрачность становится равной 0, свойство display получает значение none.

Это вариант изученного выше метода hide(), дополненный анимацией непрозрачности.

FadeIn является противоположностью метода fadeOut.

Метод fadeToggle

Метод fadeToggle()

Метод fadeToggle() похож на метод toggle(). Если элемент скрыт, он показывается. Если показан — скрывается, причём, как можно догадаться, это выполняется с анимацией.

<h1 id="target">Hello Coddy</h1>	
<button id="toggle">Fade Toggle</button>	

<script>
/*
fadeToggle() method shows or hides the 
target element in the DOM with Animation
*/
$('#toggle').on('click', function(){
  $('#target').fadeToggle();
});
</script>

Анимация CSS

Анимации CSS

Анимации в jQuery выполняются методом animate(). Этот метод принимает внутри аргумент в формате JSON. В этом JSON мы определяем, какие свойства CSS целевого элемента изменятся.

Второй параметр — это время анимации в миллисекундах (этот параметр необязателен).

<div id="target">Box</div>

<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>

<script>
/*
The animate method takes a JSON object 
containing four properties as an argument.
*/
$("#target").animate({
            width: "100px",
            height: "100px",
            marginLeft: "50px",
            opacity: 0.5
        }, 4000);
</script>

Обработчик событий анимации

Последним аргументом, который можно передать методу animate, является обработчик событий, запускаемый после завершения анимации.

<div id="target">Box</div>

<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>

<script>
/*
The animate method takes a JSON object 
containing four properties as an argument.
*/
$("#target").animate({
            width: "100px",
            height: "100px",
            marginLeft: "50px",
            opacity: 0.5
        }, 4000, 
   function(){
    alert('animation is completed')
});
</script>

Относительная анимация

Упомянем также небольшое удобство при работе с анимациями.

Свойствам, используемым в анимациях, можно назначать относительные значения вместо абсолютных.

Следующий пример поможет понять это нагляднее.

Во время анимации к свойству top соответствующего целевого элемента было добавлено 100px.

$("button").animate({            
            top: "+=100px",
        });

Остановка анимации

Чтобы остановить текущую анимацию, достаточно выбрать цель, для которой она определена, и использовать метод stop().

const $ = (selector) => ({ stop: () => console.log('stop called on ' + selector) });
$("#target").stop();

Готовые методы

Как мы можем создавать анимации, определяя собственные свойства CSS с помощью jQuery, так мы можем использовать и готовые методы jQuery.

Давайте рассмотрим следующий код.

//showing by slide up animation.
console.log("slideUp animation on div elements");

//hiding by slide up animation.
console.log("slideUp animation on div elements");

/*
hides if the element is showing,
or shows if it is hidden.
*/
console.log("slideToggle animation on div elements");

Относительная длительность анимации

Как и в других методах анимации, в этом методе длительность анимации следует передать первым аргументом, если мы хотим её задать.

// animation takes 1 second.
console.log("$('div').slideUp(1000) - slides element up over 1000ms");

/*
We can also use a relative 
expression like slow or fast.
*/
console.log("$('div').slideUp('fast') - slides element up quickly");
console.log("$('div').slideToggle('slow') - toggles slide animation slowly");

Обработчик событий

Последнее, что я расскажу об анимации слайдов. Хм, кажется, я забыл.

Так же, как и в методе animate (где мы определяем обработчик событий, запускаемый после завершения анимации), мы можем передать анонимную функцию в качестве второго аргумента приведённых выше методов.

setTimeout(function() {
	//Call when animation is completed
}, 1000);

Поздравляем

Поздравляем 🎉

Мы изучили jQuery и анимации.

В следующем разделе мы изучим операции AJAX.

Часто задаваемые вопросы

Урок «jQuery и анимации» бесплатный?

Да — полный текст урока «jQuery и анимации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 1 уроков всего.

Чему я научусь в уроке «jQuery и анимации»?

jQuery и анимации Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.

Сколько времени занимает урок «jQuery и анимации»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

← Назад к jQuery Academy