« Обратно к странице эффектов
slideToggle( скорость, [вызов] )
Переключает видимость всех совпавших элементов набора, используя эффект изменения высоты элементов. Также, по завершению операции возможен запуск функции, переданной в аргумент “вызов”.
Для данного типа анимации используется лишь изменение высоты, что позволяет раскрывать элементы в “скользящий” способ. Начиная с jQuery версии 1.3 атрибуты padding и margin также анимируются, создавая при этом более плавный эффект.
Аргументы:
| скорость |
Строка, Число |
|
| Строка представляет собой один из трех предустановленных режимов скорости (”slow”, “normal”, или “fast”). В качестве числа указывается значение в миллисекундах (например, 1000). |
| вызов (необязательно) |
Функция |
|
Функция, которая запускается после окончания анимационных эффектов. Выполняется единожды для каждого элемента.
function callback() {
this; // dom element
}
|
Примеры:
| Name |
Type |
Скрывает/раскрывает все параграфы используя эффект «скольжения» вниз и вверх, длительность анимации — 600 миллисекунд.
$("button").click(function () {
$("p").slideToggle("slow");
});
<!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-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$("p").slideToggle("slow");
});
});
</script>
<style>
p { width:400px; }
</style>
</head>
<body>
<button>Toggle</button>
<p>
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</p>
</body>
</html>
Скрывает/раскрывает элементы div между разделителями.
$("#aa").click(function () {
$("div:not(.still)").slideToggle("slow", function () {
var n = parseInt($("span").text(), 10);
$("span").text(n + 1);
});
});
<!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-latest.js"></script>
<script>
$(document).ready(function(){
$("#aa").click(function () {
$("div:not(.still)").slideToggle("slow", function () {
var n = parseInt($("span").text(), 10);
$("span").text(n + 1);
});
});
});
</script>
<style>
div { background:#b977d1; margin:3px; width:60px;
height:60px; float:left; }
div.still { background:#345; width:5px; }
div.hider { display:none; }
span { color:red; }
</style>
</head>
<body>
<button id =aa>Toggle</button> There have been <span>0</span> toggled divs.
<div></div><div class="still"></div>
<div style="display:none;"></div><div class="still"></div>
<div></div><div class="still"></div>
<div class="hider"></div><div class="still"></div>
<div class="hider"></div><div class="still"></div>
<div></div>
</body>
</html>
