[Функция] fadeIn(speed, callback)
Раздел "Effects"
Функция увеличивает свойство opacity (прозрачность) во всех подходящих элементах и запускает необязательную функцию callback после выполнения основной функции.
Параметры
fadeIn(speed, callback)
1.0
speed: значение скорости, строка представленная одним из трёх вариантом скоростей ("slow", "normal", or "fast") или в миллисекундах (например 1000)
callback: функция выполянейтся, когда анимация будет завершена, выполняется единажды, для каждого анимируемого элемента
function callback(eventObject) {
this; // элемент
}
Описание
Анимация производится для свойства opacity(прозрачность), это означает, что все нужные вам элементы должны иметь определенную высоту (height) и ширину (width)
Примеры
Пример:
Анимировать прозрачность (css свойство opacity) всех элементов div, анимация занимает 600 мс.
"HTML"
<p> <span>Click here...</span> <div id="one"></div> <div id="two"></div> <div id="three"></div>
"CSS"
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#one { background:#f00; }
div#two { background:#0f0; }
div#three { background:#00f; }
"Живой пример 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(){ $(document.body).click(function () { $("div:hidden:first").fadeIn("slow"); }); }); </script> </head> <body class="iframe"> <p> <span>Click here...</span> <div id="one"></div> <div id="two"></div> <div id="three"></div> </body> </html> <style> div { margin:3px; width:80px; display:none; height:80px; float:left; } div#one { background:#f00; } div#two { background:#0f0; } div#three { background:#00f; } </style>
Пример:
Сделать непрозрачным красный блок по верх некоторый текста. Как только анимация выполнена, появляется дополнительлный текст поверх красного блока.
"jQuery"
$("a").click(function () {
$("div").fadeIn(3000, function () {
$("span").fadeIn(100);
});
return false;
});
"HTML"
<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... (click!)
<div><span>CENSORED!</span></div>
</p>
"CSS"
p { position:relative; width:400px; height:90px; }
div { position:absolute; width:400px; height:65px;
font-size:36px; text-align:center;
color:yellow; background:red;
padding-top:25px;
top:0; left:0; display:none; }
span { display:none; }
"Живой пример 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(){ $("a").click(function () { $("div").fadeIn(3000, function () { $("span").fadeIn(100); }); return false; }); }); </script> </head> <body class="iframe"> <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... (click!) <div><span>CENSORED!</span></div> </p> </body> </html> <style> p { position:relative; width:400px; height:90px; } div { position:absolute; width:400px; height:65px; font-size:36px; text-align:center; color:yellow; background:red; padding-top:25px; top:0; left:0; display:none; } span { display:none; } </style>
Версия jQuery 1.4.2
Документ создан 2010-08-21