jQuery Effects - упражнения, практика, решение

jQuery Effects [14 упражнений с решением]

1. Анимируйте элемент, изменив его высоту и ширину. Перейти к редактору
Пример данных :

HTML-код:

 <Тело>
 <button id = "btn1"> Высота и ширина анимации </ button>
 <button id = "btn2"> Сбросить </ button>
 <div id = "box" style = "background: # 98bf21; высота: 100px; ширина: 100px; поле: 6px;"> </ div> 
 </ Body> 

Нажмите меня, чтобы увидеть решение

2. Остановить анимацию. Перейти к редактору
Пример данных :

HTML-код:

 <Тело>
<button id = "btn1"> Запустить анимацию </ button>
<button id = "btn2"> Остановить анимацию </ button>
<div id = "box" style = "background: # 5858FA; высота: 100px; ширина: 100px; поле: 6px;"> </ div>  
</ Body> 

Нажмите меня, чтобы увидеть решение

3. Установите таймер, чтобы задержать выполнение последующих элементов в очереди. Перейти к редактору
Пример данных :

HTML-код:

 <Тело>
<button id = "btn1"> Запустить анимацию </ button>
<button id = "btn2"> Остановить анимацию </ button>
<div id = "box" style = "background: # 5858FA; высота: 100px; ширина: 100px; поле: 6px;"> </ div>  
</ Body>

Нажмите меня, чтобы увидеть решение

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

5. Появляются и исчезают все элементы деления. Перейти к редактору
Пример данных :

HTML-код:

 <Тело>
 <div style = "background: # 2E9AFE; ширина: 100%;"> Мой эффект - эффект fadeOut </ div>
 <button id = "btn2"> Fade In (3 секунды) </ button>
 <button id = "btn1"> Исчезновение (3 секунды) </ button>
 </ Body> 

Нажмите меня, чтобы увидеть решение

6. Анимация абзаца для перехода к указанной непрозрачности (завершите анимацию в течение 500 миллисекунд). Перейти к редактору
Пример данных :

HTML-код:

 <Тело>
<p> Нажмите на этот абзац, чтобы увидеть, как он исчезает. </ p>
</ Body> 

Нажмите меня, чтобы увидеть решение

7. Напишите код jQuery, чтобы получить один элемент из выбора. Перейти к редактору
Пример данных :

HTML-код:

 <Тело>
<Щ>
<li> Учебник по HTML </ li>
<li> Учебное пособие по Mongodb </ li>
<li> Python Tutorial </ li>
</ Body>

Нажмите меня, чтобы увидеть решение

8. Переключайтесь между появлением и исчезновением разных полей. Перейти к редактору
Пример данных :

HTML-код:

 <Тело>
<p> fadeToggle () с различными параметрами скорости. </ p>  
<button> Нажмите, чтобы увеличить / уменьшить поля </ button> <br> <br>
<div id = "div1" style = "ширина: 100px; высота: 100px; цвет фона: # 6D5050;"> </ div>
<br>
<div id = "div2" style = "ширина: 100px; высота: 100px; цвет фона: # 42D5A9;"> </ div>
<br>
<div id = "div3" style = "ширина: 100px; высота: 100px; цвет фона: # 8942D5;"> </ div>
</ Body>

Нажмите меня, чтобы увидеть решение

9. Завершите текущую анимацию: перейдите в редактор

Нажмите меня, чтобы увидеть решение

10. Анимация всех отображаемых абзацев для медленного скрытия (завершите анимацию в течение заданного времени). Перейти к редактору
Пример данных :

HTML-код:

 <Тело>
<p> Идентификатор пользователя: <input type = "text" id = 'field1'> </ p>
<p> Пароль: <input type = "password" id = 'field2'>
</ Body>

Нажмите меня, чтобы увидеть решение

11. Запустите анимацию с меньшим количеством кадров. Перейти к редактору
Пример данных :

HTML-код:

 <Тело>
<p> <input type = "button" value = "Run"> </ p>
<DIV> </ DIV>
</ Body>

Нажмите меня, чтобы увидеть решение

12. Включите и выключите анимацию. Перейти к редактору
Пример данных :

HTML-код:

 <button id = "enable"> (Enable) jQuery.fx.off = false) </ button>  
<button id = "disable"> (отключить) jQuery.fx.off = true) </ button>
<br> <br>
<button id = "toggle"> Переключить анимацию </ button>
<div style = "background: # 98bf21; высота: 100px; ширина: 100px; поле: 50px;"> </ div>  

Нажмите меня, чтобы увидеть решение

13. Анимирует все скрытые элементы, чтобы показать медленно. Перейти к редактору
Пример данных :

HTML код:

 <Тело>
<button> Показать </ button>
<p style = "display: none"> Hello </ p>
</ Body> 

Нажмите меня, чтобы увидеть решение

14. Анимирует все div, чтобы скользить вниз и скользить вверх. Перейти к редактору
Пример данных :

HTML код:

 <Тело>
 <button class = "btn1"> Сдвиньте вниз </ button>
 <button class = "btn2"> Сдвиньте вверх </ button>
 <br> <br>
  <DIV> </ DIV>
  <DIV> </ DIV>
  <DIV> </ DIV>
</ Body> 

Нажмите меня, чтобы увидеть решение

Еще не все !

Не отправляйте решение вышеупомянутых упражнений здесь, если вы хотите внести вклад, перейдите на соответствующую страницу упражнения.

Демонстрация в реальном времени:

См. Pen- common-jquery-core-упражнение от w3resource ( @ w3resource ) в CodePen .