.fadeTo( продолжительность, непрозрачность, [ вызов ] )
Возвращает: jQuery
Описание: Устанавливает непрозрачность соответствующих элементов.
.fadeTo( продолжительность, непрозрачность, [ вызов ] )
Добавлена в версию: 1.0
Строка или число, определяющие, как долго анимация будет работать.
непрозрачность
Число между 0 и 1 обозначающее непрозрачность.
вызов
Функция вызываемая после завершения анимации.
.fadeTo( продолжительность, непрозрачность, [ ослабление ], [ вызов ] )
Добавлена в версию: 1.4.3
Строка или число, определяющие, как долго анимация будет работать.
непрозрачность
Число между 0 и 1 обозначающее непрозрачность.
ослабление
Строка, указывающая какая функция ослабления будет использоватся для перехода.
вызов
Функция вызываемая после завершения анимации.
Метод .fadeTo() анимирует непрозрачность соответствующих элементов.
Длительность дается в милисекундах; более высокое число показывает более медленную анимацию, а не быструю. Выражения '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 shown, we can dim it slowly:
$('#clickme').click(function() {
$('#book').fadeTo('slow', 0.5, function() {
// Animation complete.
});
});
Если продолжительность установленна в 0, этот метод только меняет свойство непрозрачность CSS, так .fadeTo(0, opacity) аналогичен .css('opacity', opacity).
Дополнительные примечания:
- Все эффекты jQuery, включая
.fadeTo(), могут быть выключенны глобально с помощью установкиjQuery.fx.off = true. Для подробной информации, смотрите jQuery.fx.off.
Примеры
Пример 1
Изменяет видимость первого параграфа до значения 0,33 (33%, одна третья от полной видимости), длительность анимационных эффектов — 600 миллисекунд.Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p:first").click(function () { $(this).fadeTo("slow", 0.33); }); }); </script> </head> <body> <p> Click this paragraph to see it fade. </p> <p> Compare to this one that won't fade. </p> </body> </html>
Пример 2
Случайным образом изменяет прозрачность элемента div, длительность анимационных эффектов — 200 миллисекунд.
$("div").click(function () {
$(this).fadeTo("fast", Math.random());
});
Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("div").click(function () {
$(this).fadeTo("fast", Math.random());
});
});
</script>
<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>
</head>
<body>
<p>And this is the library that John built...</p>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
Пример 3
Найдите правильный ответ! Длительность анимационных эффектов — 250 миллисекунд.
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"});
});
});
Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("div").click(function () { $(this).fadeTo("fast", Math.random()); }); }); </script> <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> </head> <body> <p>And this is the library that John built...</p> <div id="one"></div> <div id="two"></div> <div id="three"></div> </body> </html>
Была ли эта информация полезной?
