Руководство jQuery - fadeOut(speed, callback)

Опубликовано admin - вт, 05/01/2018 - 23:40

[Функция] fadeOut(speed, callback)

Раздел "Effects"

Функция уменьшает свойство opacity для всех выбранных элементов к 0, затем устанавливает свойство display как none и запускает необязательную функцию повторного вызова callback, после выполнения основной функции.

Параметры

fadeOut(speed, callback)

1.0

speed: значение скорости, строка представленная одним из трёх вариантов скоростей ("slow", "normal", or "fast") или в миллисекундах (например 1000)

callback: функция выполняемая, когда анимация будет завершена, выполняется единажды, для каждого анимируемого элемента

function callback(eventObject)  { 

	this; // элемент 
}

Описание

Анимируется только свойтсво opacity, что предполагает наличие свойств height и width у каждого соответствующего объекта.

Примеры

Пример:

Уменьшить прозрачность всех параграфов, функция выполянет анимацию в течение 600 мс.

Пример
Весь код

"jQuery"

    $("p").click(function () {
      $("p").fadeOut("slow");
    });

"HTML"

<p>
    If you click on this paragraph
    you'll see it just fade away.
  </p>

"CSS"

    
p { font-size:150%; cursor:pointer; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
						"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" 
	rel="stylesheet" type="text/css"/>
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<script>
	  $(document).ready(function(){
	
    $("p").click(function () {
      $("p").fadeOut("slow");
    });

	  });
	</script>

	</head>
	<body class="iframe">

	
<p>
    If you click on this paragraph
    you'll see it just fade away.
  </p>


	</body>
	</html>

	
	<style>
	    
p { font-size:150%; cursor:pointer; }

	</style>

Пример:

Уменьшить прозрачность всех элементов span в секции, по которой был произведён щелчок.

Пример
Весь код

"jQuery"

    $("span").click(function () {
      $(this).fadeOut(1000, function () {
        $("div").text("'" + $(this).text() + "' has faded!");
        $(this).remove();
      });
    });
    $("span").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });

"HTML"

<h3>Find the modifiers - <div></div></h3>
  <p>
    If you <span>really</span> want to go outside
    <span>in the cold</span> then make sure to wear
    your <span>warm</span> jacket given to you by
    your <span>favorite</span> teacher.
  </p>

"CSS"

    
  span { cursor:pointer; }
  span.hilite { background:yellow; }
  div { display:inline; color:red; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
						"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" 
	rel="stylesheet" type="text/css"/>
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<script>
	  $(document).ready(function(){
	
    $("span").click(function () {
      $(this).fadeOut(1000, function () {
        $("div").text("'" + $(this).text() + "' has faded!");
        $(this).remove();
      });
    });
    $("span").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });

	  });
	</script>

	</head>
	<body class="iframe">

	
<h3>Find the modifiers - <div></div></h3>
  <p>
    If you <span>really</span> want to go outside
    <span>in the cold</span> then make sure to wear
    your <span>warm</span> jacket given to you by
    your <span>favorite</span> teacher.
  </p>


	</body>
	</html>

	
	<style>
	    
  span { cursor:pointer; }
  span.hilite { background:yellow; }
  div { display:inline; color:red; }

	</style>

Метод появился в jQuery 1.0 (http://api.jquery.com/fadeOut/)

Версия jQuery 1.4.2 Документ создан 2010-08-21

Руководство по jQuery!

Плагины jQuery UI

Эффекты