[Функция] fadeToggle([duration],[easing],[callback])
Раздел "Effects"
Метод скрывает или отображает элемент, изменяя css свойство opacity
fadeToggle([duration],[easing],[callback])
1.4.2
duration:
скорость анимации
easing:
эффект анимации
callback:
функция выполняемая после завершения анимации
function callback(eventObject) {
this; // элемент
}
Метод скрывает текущий элемент, изменяя свойство opacity к 0, после этого свойство display устанавливается как none, обратный порядок применяется для скрытых элементов (со свойством display:block;)
Параметр duration - скорость анимации в милисекундах, занчения 'fast' 'slow' соответсвуют 200 и 600 мс. соответсвенно.
Параметр easing - эффект анимации, для него необходимо подключение внешнего файла js. Едиснтвенными допуцстимыми, без подключения внешнего файла, эффектами является - эфекты под названием 'swing' и 'liner'
Функция обратного вызова является необязательным параметром данного метода, она не принимает ни один аргумент, но через ключевое this возможно получить доступ к текущему анимируемому элементу, если анимация выполнялось для нескольких элементов, функция будет применяться для каждого элемента.
Пример:
Уменьшить прозрачность первого параграфа до 0.33 (33%, примерно одна третья), анимация выполняется в течение 600 мс.
"HTML"
<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>This paragraph has a fast animation.</p>
<div id="log"></div>
"Живой пример 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(){
$("button:first").click(function() {
$("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function () {
$("p:last").fadeToggle("fast", function () {
$("#log").append("<div>finished</div>");
});
});
});
</script>
</head>
<body class="iframe">
<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>This paragraph has a fast animation.</p>
<div id="log"></div>
</body>
</html>
Версия jQuery 1.4.2
Документ создан 2010-08-21
