.fadeOut()


.fadeOut( [duration ] [, complete ] )Возвращает: jQuery

Описание: Скрывает соответствующие элементы путем затухания их до прозрачного состояния.

  • Добавлен в версии: 1.0.fadeOut( [duration ] [, complete ] )

    • duration (значение по умолчанию: 400)
      Тип: Number or String
      Строка или число, определяющая длительность анимации.
    • complete
      Тип: Function()
      Функция, которая вызывается по окончании выполнения анимации, вызывается для каждого соответствующего элемента.
  • Добавлен в версии: 1.0.fadeOut( options )

    • options
      Тип: PlainObject
      Ассоциативный массив с дополнительными опциями.
      • duration (значение по умолчанию: 400)
        Тип: Number or String
        Строка или число, определяющая длительность анимации.
      • easing (значение по умолчанию: swing)
        Тип: String
        Строка указывающая какая функция будет использована для анимации.
      • queue (значение по умолчанию: true)
        Тип: Boolean или String
        Булевый флаг, означающий следует ли поместить анимацию в очередь выполняемых эффектов. Если значение false, то анимация запустится немедленно. Начиная с jQuery 1.7, опция queue может также принимать строку, в этом случае анимация будет добавлена в очередь представленная этой строкой. Когда используется произвольное имя в очереди - анимация не запускается автоматически, Вы должны вызвать метод .dequeue("queuename") для ее запуска.
      • specialEasing
        Тип: PlainObject
        Объект содержащий один или несколько CSS свойств и определяющий соответствующую функцию анимации для конкретного CSS свойства. (Добавлен в версии: 1.4)
      • step
        Тип: Function( Number now, Tween tween )
        Функция, которая вызывается для каждого анимированного свойства каждого анимационного элемента. Эта функция дает возможность изменять объект Tween, чтобы изменить значение свойства, прежде чем оно установлено.
      • progress
        Тип: Function( Promise animation, Number progress, Number remainingMs )
        Функция, которая вызывается после каждого шага анимации, только один раз для анимационного элемента, независимо от количества анимированных свойств. (Добавлен в версии: 1.8)
      • complete
        Тип: Function()
        Функция, которая вызывается один раз для анимации на элементе при ее завершении.
      • start
        Тип: Function( Promise animation )
        Функция, которая вызывается перед началом анимации. (Добавлен в версии: 1.8)
      • done
        Тип: Function( Promise animation, Boolean jumpedToEnd )
        Функция, которая вызывается после завершения анимации на элементе. (Добавлен в версии: 1.8)
      • fail
        Тип: Function( Promise animation, Boolean jumpedToEnd )
        Функция, которая вызывается если анимация завершается ошибкой. (Добавлен в версии: 1.8)
      • always
        Тип: Function( Promise animation, Boolean jumpedToEnd )
        Функция, которая вызывается в любом случае - либо при завершении анимации, либо при ее отмене без выполенения. (Добавлен в версии: 1.8)
  • Добавлен в версии: 1.4.3.fadeOut( [duration ] [, easing ] [, complete ] )

    • duration (значение по умолчанию: 400)
      Тип: Number or String
      Строка или число, определяющая длительность анимации.
    • easing (значение по умолчанию: swing)
      Тип: String
      Строка указывающая какая функция будет использована для анимации.
    • complete
      Тип: Function()
      Функция, которая вызывается один раз для анимации на элементе при ее завершении.

Метод .fadeOut() анимирует прозрачность выбранных элементов. После того как прозрачность достигнет значения 0, свойство стиля display будет установлено в none, для того чтобы элемент больше не влиял на верстку страницы.

Длительность задается в милисекундах. Более высокие значения означает более медленную анимацию, а не быструю. Значение по умолчанию 400 милисекунд. Строки 'fast' и 'slow' могут быть использованы для указания длительности 200 и 600 милисекунд соответственно.

Мы можем анимировать любой элемент, например простое изображение:

1
2
3
4
<div id="clickme">
Нажми на меня
</div>
<img id="book" src="book.png" alt="" width="100" height="123">

Изначально показываемый элемент, мы можем скрыть с более медленной анимацией:

1
2
3
4
5
$( "#clickme" ).click(function() {
$( "#book" ).fadeOut( "slow", function() {
// Анимация завершена.
});
});
Картина 1 - Иллюстрирует работу эффекта fadeOut()

Примечание: Для того чтобы избежать ненужных DOM манипуляций, .fadeOut() не будет скрывать элемент, если он уже считается скрытым. Более подробно об элементах jQuery условно скрытых, смотрите на странице селектор :hidden.

Функция исчезания (Easing)

Начиная с jQuery 1.4.3, может быть использована необязательная строка, содержащая название функции easing. Функция easing определяет скорость с которой анимация прогрессирует в различных точках в пределах анимации. В базовом функционале jQuery поставляется две такие функции: swing, используемая по умолчанию, и linear с равномерным изменением анимации. Больше easing функций доступны при использовании плагинов, в первую очередь jQuery UI suite.

Функции обратного вызова

Если указана, то функция будет вызвана после завершения анимации. Это может быть использовано для создания очереди анимаций. Функция обратного вызова не принимает никаких аргументов, но this внутри нее ссылается на анимируемый DOM элемент. Если анимируется несколько элементов, то важно понимать, что эта функция будет выполнена для каждого элемента, а не для анимации целиком.

As of jQuery 1.6, the .promise() method can be used in conjunction with the deferred.done() method to execute a single callback for the animation as a whole when all matching elements have completed their animations ( See the example for .promise() ).

Дополнительные замечания:

  • All jQuery effects, including .fadeOut(), can be turned off globally by setting jQuery.fx.off = true, which effectively sets the duration to 0. For more information, see jQuery.fx.off.

Примеры:

Animates all paragraphs to fade out, completing the animation within 600 milliseconds.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
p {
font-size: 150%;
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
If you click on this paragraph
you'll see it just fade away.
</p>
<script>
$( "p" ).click(function() {
$( "p" ).fadeOut( "slow" );
});
</script>
</body>
</html>

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

Fades out spans in one section that you click on.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
span {
cursor: pointer;
}
span.hilite {
background: yellow;
}
div {
display: inline;
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<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>
<script>
$( "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>
</body>
</html>

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

Fades out two divs, one with a "linear" easing and one with the default, "swing," easing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
.box,
button {
float: left;
margin: 5px 10px 5px 0;
}
.box {
height: 80px;
width: 80px;
background: #090;
}
#log {
clear: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btn1">fade out</button>
<button id="btn2">show</button>
<div id="log"></div>
<div id="box1" class="box">linear</div>
<div id="box2" class="box">swing</div>
<script>
$( "#btn1" ).click(function() {
function complete() {
$( "<div>" ).text( this.id ).appendTo( "#log" );
}
$( "#box1" ).fadeOut( 1600, "linear", complete );
$( "#box2" ).fadeOut( 1600, complete );
});
$( "#btn2" ).click(function() {
$( "div" ).show();
$( "#log" ).empty();
});
</script>
</body>
</html>

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