[Функция] slideToggle(speed, callback)
Раздел "Effects"
Функция переключает свойство visibility для каждого выбранного элемента, регулируя свойства height и запустить необязательную функцию callback после выполнения основной функции.
Параметры
slideToggle(speed, callback)
1.0
speed: строка представленная одним из трёх вариантов скоростей ("slow", "normal", or "fast") или в миллисекундах (например 1000)
callback: функция выполняемая, когда анимация будет завершена, выполняется единожды для каждого анимируемого элемента
function callback(eventObject) {
this; // элемент
}
Описание
Только высота элемента подлежит анимации, функция делает все элементы скрытыми или видимыми в "скользящей" манере. Начиная с jQuery 1.3 свойства vertical padding и vertical margin также анимированы, что создаёт сглаживающий эффект.
Примеры
Пример:
Анимировать все параграфы с использованием «скользящего вверх или вниз метода», анимация выполняется в течение 600 мс.
"jQuery"
$("button").click(function () {
$("p").slideToggle("slow");
});
"HTML"
<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>
"CSS"
p { width:400px; }
"Живой пример 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").click(function () { $("p").slideToggle("slow"); }); }); </script> </head> <body class="iframe"> <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> <style> p { width:400px; } </style>
Пример:
Анимировать элементы div между разделителями с использованием функции toggle, которая показывает и скрывает их.
"jQuery"
$("#aa").click(function () {
$("div:not(.still)").slideToggle("slow", function () {
var n = parseInt($("span").text(), 10);
$("span").text(n + 1);
});
});
"HTML"
<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>
"CSS"
div { background:#b977d1; margin:3px; width:60px;
height:60px; float:left; }
div.still { background:#345; width:5px; }
div.hider { display:none; }
span { color:red; }
"Живой пример 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(){ $("#aa").click(function () { $("div:not(.still)").slideToggle("slow", function () { var n = parseInt($("span").text(), 10); $("span").text(n + 1); }); }); }); </script> </head> <body class="iframe"> <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> <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>
Версия jQuery 1.4.2
Документ создан 2010-08-21