.fadeOut( [ продолжительность ], [ вызов ] )
Возвращает: jQuery
Описание: Скрывает соответствующие элементы с эффектом затухания.
.fadeOut( [ продолжительность ], [ вызов ] )
Добавлена в версию: 1.0
Строка или число, определяющие, как долго анимация будет работать.
вызов
Функция вызываемая после завершения анимации.
.fadeOut( [ продолжительность ], [ ослабление ], [ вызов ] )
Добавлена в версию: 1.4.3
Строка или число, определяющие, как долго анимация будет работать.
ослабление
Строка, указывающая какая функция ослабления будет использоватся для перехода.
вызов
Функция вызываемая после завершения анимации.
Метод .fadeOut() анимирует прозрачность соответствующих элементов. Когда прозрачность достигает 0, свойство стиля display устанавливается в none, так что элемент больше не влияет на верстку страницы.
Длительность дается в милисекундах; более высокое число показывает более медленную анимацию, а не быструю. Выражения 'fast' и 'slow' соответствуют продолжительности в 200 и 600 милисекунд, соответственно. Если другие выражения представленны или если параметр продолжительность опущен, используется продолжительность по умолчанию в 400 милисекунд.
Если указанна, функция обратного вызова, то она вызывается после завершения анимации. Это может быть полезно для нанизывания различных анимаций вместе в определенной последовательности. В функцию обратного вызова не передается никаких аргументов, но this является элементом DOM, который анимируется. Если многочисленные элементы анимируются, важно отметить, что функция обратного вызова вызывается единожды для каждого соответствующего элемента, а не один раз в целом на анимацию.
Мы можем анимировать любой элемент, например, простое изображение:
<div id="clickme"> Click here </div> <img id="book" src="book.png" alt="" width="100" height="123" />
Если элемент показан, мы можем медленно его скрыть:
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
Дополнительные примечания:
- Все эффекты jQuery, включая
.fadeOut(), могут быть выключенны глобально с помощью установкиjQuery.fx.off = true. Для подробной информации, смотрите jQuery.fx.off.
Примеры
Пример 1
Скрываем все параграфы, используя эффект fadeout (затухания), длительность анимации – 600 миллисекунд.Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").click(function () { $("p").fadeOut("slow"); }); }); </script> <style> p { font-size:150%; cursor:pointer; } </style> </head> <body> <p> If you click on this paragraph you'll see it just fade away. </p> </body> </html>
Пример 2
По нажатию скрывает блоки span используя эффект fadeout (затухания).Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(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> <style> span { cursor:pointer; } span.hilite { background:yellow; } div { display:inline; color:red; } </style> </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> </body> </html>
Была ли эта информация полезной?
