[Функция] fadeTo(speed, opacity, callback)
Раздел "Effects"
Функция уменьшает свойство opacity для всех подходящих элементов к заданному значению и запускает необязательную функцию callback, после выполнения основной функции.
Параметры
fadeTo(speed, opacity, callback)
1.0
speed: строка представленная одним из трёх вариантом скоростей ("slow", "normal", or "fast") или в миллисекундах (например 1000).
opacity: уменьшаемое значение прозрачности (число от 0 до 1)
callback: функция выполянейтся, когда анимация будет завершена, выполняется единажды, для каждого анимируемого элемента
function callback(eventObject) {
this; // элемент
}
Описание
Анимируется только свойство opacity, что предполагает наличие свойств height и width у каждого выбранного объекта.
Примеры
Пример:
Уменьшить прозрачность первого параграфа до 0.33 (33%, примерно одна третья), анимация выполняется в течение 600 мс.
"HTML"
<p>
Click this paragraph to see it fade.
</p>
<p>
Compare to this one that won't fade.
</p>
"Живой пример 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:first").click(function () { $(this).fadeTo("slow", 0.33); }); }); </script> </head> <body class="iframe"> <p> Click this paragraph to see it fade. </p> <p> Compare to this one that won't fade. </p> </body> </html>
Пример:
Установить прозрачность элемента div случайным образом, по каждому щелчку, функция выполняется примерно 200 мс.
"HTML"
<p>And this is the library that John built...</p> <div id="one"></div> <div id="two"></div> <div id="three"></div> </p>
"CSS"
p { width:80px; margin:0; padding:5px; }
div { width:40px; height:40px; position:absolute; }
div#one { top:0; left:0; background:#f00; }
div#two { top:20px; left:20px; background:#0f0; }
div#three { top:40px; left:40px; 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(){ $("div").click(function () { $(this).fadeTo("fast", Math.random()); }); }); </script> </head> <body class="iframe"> <p>And this is the library that John built...</p> <div id="one"></div> <div id="two"></div> <div id="three"></div> </p> </body> </html> <style> p { width:80px; margin:0; padding:5px; } div { width:40px; height:40px; position:absolute; } div#one { top:0; left:0; background:#f00; } div#two { top:20px; left:20px; background:#0f0; } div#three { top:40px; left:40px; background:#00f; } </style>
Пример:
Найди правый ответ! Уменьшение прозрачности займёт 250 мс, так же происходит изменение различных стилей, когда анимация завершена.
"jQuery"
var getPos = function (n) {
return (Math.floor(n) * 90) + "px";
};
$("p").each(function (n) {
var r = Math.floor(Math.random() * 3);
var tmp = $(this).text();
$(this).text($("p:eq(" + r + ")").text());
$("p:eq(" + r + ")").text(tmp);
$(this).css("left", getPos(n));
});
$("div").each(function (n) {
$(this).css("left", getPos(n));
})
.css("cursor", "pointer")
.click(function () {
$(this).fadeTo(250, 0.25, function () {
$(this).css("cursor", "")
.prev().css({"font-weight": "bolder",
"font-style": "italic"});
});
});
"HTML"
<p>Wrong</p> <div></div> <p>Wrong</p> <div></div> <p>Right!</p> <div></div>
"CSS"
div, p { width:80px; height:40px; top:0; margin:0;
position:absolute; padding-top:8px; }
p { background:#fcc; text-align:center; }
div { background:blue; }
"Живой пример 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(){ var getPos = function (n) { return (Math.floor(n) * 90) + "px"; }; $("p").each(function (n) { var r = Math.floor(Math.random() * 3); var tmp = $(this).text(); $(this).text($("p:eq(" + r + ")").text()); $("p:eq(" + r + ")").text(tmp); $(this).css("left", getPos(n)); }); $("div").each(function (n) { $(this).css("left", getPos(n)); }) .css("cursor", "pointer") .click(function () { $(this).fadeTo(250, 0.25, function () { $(this).css("cursor", "") .prev().css({"font-weight": "bolder", "font-style": "italic"}); }); }); }); </script> </head> <body class="iframe"> <p>Wrong</p> <div></div> <p>Wrong</p> <div></div> <p>Right!</p> <div></div> </body> </html> <style> div, p { width:80px; height:40px; top:0; margin:0; position:absolute; padding-top:8px; } p { background:#fcc; text-align:center; } div { background:blue; } </style>
Версия jQuery 1.4.2
Документ создан 2010-08-21