.fadeIn( [ продолжительность ], [ вызов ] )
Возвращает: jQuery
Описание: Отображает соответствующие элементы с эффектом изменения затемненности до полной видимости.
.fadeIn( [ продолжительность ], [ вызов ] )
Добавлена в версию: 1.0
Строка или число, определяющие, как долго анимация будет работать.
вызов
Функция вызываемая после завершения анимации.
.fadeIn( [ продолжительность ], [ ослабление ], [ вызов ] )
Добавлена в версию: 1.4.3
Строка или число, определяющие, как долго анимация будет работать.
ослабление
Строка, указывающая какая функция ослабления будет использоватся для перехода.
вызов
Функция вызываемая после завершения анимации.
Метод .fadeIn() анимирует прозрачность соответствующих элементов.
Длительность дается в милисекундах; более высокое число показывает более медленную анимацию, а не быструю. Выражения 'fast' и 'slow' соответствуют продолжительности в 200 и 600 милисекунд, соответственно. Если другие выражения представленны или если параметр продолжительность опущен, используется продолжительность по умолчанию в 400 милисекунд.
Если указанна, функция обратного вызова, то она вызывается после завершения анимации. Это может быть полезно для нанизывания различных анимаций вместе в определенной последовательности. В функцию обратного вызова не передается никаких аргументов, но this является элементом DOM, который анимируется. Если многочисленные элементы анимируются, важно отметить, что функция обратного вызова вызывается единожды для каждого соответствующего элемента, а не один раз в целом на анимацию.
Мы можем анимировать любой элемент, например, простое изображение:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially hidden, we can show it slowly:
$('#clickme').click(function() {
$('#book').fadeIn('slow', function() {
// Animation complete
});
});
Дополнительные примечания:
- Все эффекты jQuery, включая
.fadeIn(), могут быть выключенны глобально с помощью установкиjQuery.fx.off = true. Для подробной информации, смотрите jQuery.fx.off.
Примеры
Пример 1
Отображает блоки div один за другим используя эффект fadein (появления), длительность анимации — 600 миллисекунд.
$(document.body).click(function () {
$("div:hidden:first").fadeIn("slow");
});
Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $(document.body).click(function () { $("div:hidden:first").fadeIn("slow"); }); }); </script> <style> span { color:red; cursor:pointer; } div { margin:3px; width:80px; display:none; height:80px; float:left; } div#one { background:#f00; } div#two { background:#0f0; } div#three { background:#00f; } </style> </head> <body> <span>Click here...</span> <div id="one"></div> <div id="two"></div> <div id="three"></div> </body> </html>
Пример 2
По нажатию отображается красный прямоугольник поверх текста. Как только анимация завершена, быстро отображается надпись поверх прямоугольника.
$("a").click(function () {
$("div").fadeIn(3000, function () {
$("span").fadeIn(2000);
});
return false;
});
Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("a").click(function () { $("div").fadeIn(3000, function () { $("span").fadeIn(2000); }); return false; }); }); </script> <style> p { position:relative; width:400px; height:90px; } div { position:absolute; width:400px; height:65px; font-size:36px; text-align:center; color:black; background:red; padding-top:25px; font-weight:bold; top:0; left:0; display:none; } </style> </head> <body> <p> Let it be known that the party of the first part and the party of the second part are henceforth and hereto directed to assess the allegations for factual correctness... (<a href="#">click!</a>) <div><span>CENSORED!</span></div> </p> </body> </html>
Была ли эта информация полезной?
