кодесурса
«JQuery

Эффект jQuery: анимирует абзац для перехода к указанной непрозрачности

script1adsense2code
script1adsense3code

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

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

HTML код:

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

Решение :

HTML-код:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Animates a paragraph to fade to an specified opacity</title>
</head>
<body>
<p>This is original paragraph. </p>
<p>Click me to see it fade.</p>
</body>
</html>

Код JavaScript:

$( "p:last" ).click(function() {
  $( this ).fadeTo( "slow", 0.40 );
});

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

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

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

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


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

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

Каков уровень сложности этого упражнения?

Новый контент: Composer: менеджер зависимостей для PHP , R программирования


script1adsense4code
script1adsense5code
disqus2code
script1adsense6code
script1adsense7code
script1adsense8code
buysellads2code