Эффект jQuery: постепенно увеличивать и уменьшать все элементы деления

Последнее обновление 21 сентября 2018 11:13:20 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Эффект jQuery: упражнение 5 с решением

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

HTML код:

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

Решение :

HTML-код:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Fade in and fade out all division elements</title>
</head>
<body>
<div style="background:#2E9AFE;width:100%;">My Effect is fadeOut Effect</div>
<button id="btn2">Fade In (3 Second)</button>
<button id="btn1">Fade Out (3 Second)</button>
</body>
</html>

Код JavaScript:

$(document).ready(function(){
  $("#btn1").click(function(){
    $("div").fadeOut(3000);
  });
   $("#btn2").click(function(){
    $("div").fadeIn(3000);
  }); 
});

Замечания :
В jQuery метод fadeIn ([duration] [, complete]) используется для отображения сопоставленных элементов путем их затухания до непрозрачного. Имеет следующие параметры:

длительность: строка или число, определяющее, как долго будет выполняться анимация. [Тип: Функция ()]
complete: функция для вызова после завершения анимации. [Тип: Функция ()]

В jQuery метод fadeout ([duration] [, complete]) используется, чтобы скрыть совпадающие элементы, сделав их прозрачными. Имеет следующие параметры:

длительность: строка или число, определяющее, как долго будет выполняться анимация. [Тип: Функция ()]
complete: функция для вызова после завершения анимации. [Тип: Функция ()]

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

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

Внесите свой код и комментарии через Disqus.

Предыдущий: Используйте dequeue, чтобы завершить пользовательскую функцию очереди, которая позволяет очереди продолжать движение.
Далее: Анимация абзаца для перехода к указанной непрозрачности (завершите анимацию в течение 500 миллисекунд).