[Функция] show(speed, callback)
Раздел "Effects"
Отобразить все подходящие элементы с применением анимации и запустить необязательную функцию после выполнения.
Параметры
show(speed, callback)
1.0
speed: строковое значение представляющее одну из трёх встроенных скоростей ("slow", "normal", or "fast") или значение в миллисекундах для движения анимации (например 1000).
callback: функция выполняемая, когда анимация завершена; выполняется один раз для каждого анимируемого объекта
function callback()
{
this; // текущий элемент
}
Описание
Данный метод позволяет изменить свойства высоты, ширины и свойство opacity каждого выбранного элемента динамично, соразмерно заданной скорости. В jQuery 1.3 css свойства padding и margin так же анимированы, что создаёт сглаживающий эффект.
Примеры
Пример:
Анимировать все скрытые параграфы, отобразив их с медленной анимацией, анимация продолжается в течении 600 миллисекунд.
"HTML"
<button>Show it</button> <p style="display: none">Hello</p>
"CSS"
p { background:yellow; }
"Живой пример 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").show("slow"); }); }); </script> </head> <body class="iframe"> <button>Show it</button> <p style="display: none">Hello</p> </body> </html> <style> p { background:yellow; } </style>
Пример:
Анимировать все скрытые элементы div, чтобы быстро их показать, в определенном порядке, анимация длится в течении 200 миллисекунд. Как только анимация выполнена, она снова повторяется для каждого объекта.
"jQuery"
$("#showr").click(function () {
$("div:eq(0)").show("fast", function () {
// используйте callee, чтоб не повторять имени функции
$(this).next().show("fast", arguments.callee);
});
});
$("#hidr").click(function () {
$("div").hide(2000);
});
"HTML"
<button id="showr">Show</button> <button id="hidr">Hide</button> <div>Hello,</div> <div>how</div> <div>are</div> <div>you?</div>
"CSS"
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
"Живой пример 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(){ $("#showr").click(function () { $("div:eq(0)").show("fast", function () { // используйте callee, чтоб не повторять имени функции $(this).next().show("fast", arguments.callee); }); }); $("#hidr").click(function () { $("div").hide(2000); }); }); </script> </head> <body class="iframe"> <button id="showr">Show</button> <button id="hidr">Hide</button> <div>Hello,</div> <div>how</div> <div>are</div> <div>you?</div> </body> </html> <style> div { background:#def3ca; margin:3px; width:80px; display:none; float:left; text-align:center; } </style>
Пример:
Анимировать все элементы span и input чтобы сделать их видимыми со скоростью normal. Как только анимация будет показана, произойдёт отображение текста.
"jQuery"
function doIt() {
$("span,div").show("normal");
}
$("button").click(doIt); // можно передать название функции
$("form").submit(function () {
if ($("input").val() == "yes") {
$("p").show(4000, function () {
$(this).text("Ok, DONE! (now showing)");
});
}
$("span,div").hide("normal");
return false; // остановить отправку данных
});
"HTML"
<button>Do it!</button>
<span>Введите 'yes' и нажмите enter</span>
<div>
<form>
<input type="text" />
</form>
</div>
<p style="display:none;">I'm hidden...</p>
"CSS"
span { display:none; }
div { display:none; }
p { font-weight:bold; background-color:#fcd; }
"Живой пример 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(){ function doIt() { $("span,div").show("normal"); } $("button").click(doIt); // можно передать название функции $("form").submit(function () { if ($("input").val() == "yes") { $("p").show(4000, function () { $(this).text("Ok, DONE! (now showing)"); }); } $("span,div").hide("normal"); return false; // остановить отправку данных }); }); </script> </head> <body class="iframe"> <button>Do it!</button> <span>Введите 'yes' и нажмите enter</span> <div> <form> <input type="text" /> </form> </div> <p style="display:none;">I'm hidden...</p> </body> </html> <style> span { display:none; } div { display:none; } p { font-weight:bold; background-color:#fcd; } </style>
Версия jQuery 1.4.2
Документ создан 2010-08-21