[Функция] hide(speed, callback)
Раздел "Effects"
Cкрыть все подходящие элементы используя анимацию и запустить необязательную функцию после выполнения.
Параметры
hide(speed, callback)
1.0
speed: строка представляющая одну из трех предопределнных скоростей ("slow", "normal", or "fast") или скорость в миллисекундах (т.е. 1000).
callback: функция выполняемая, когда анимация завершена, выполняется единожды для каждого анимируемого объекта
function callback()
{
this; // текущий элемент
}
Описание
Высота, ширина, и свойство opacity для каждого выбранного элемента динамично изменяются согласно заданной скорости. В jQuery 1.3 свойства padding и margin также анимированы, для придания сглаживающего эффекта.
Примеры
Пример:
Анимировать все отображаемые параграфы со скоростью slow, анимация выполняется со скорость в 600 миллисекунд.
"HTML"
<button>Hide 'em</button> <p>Hiya</p> <p>Such interesting text, eh?</p>
"CSS"
p { background:#dad; font-weight:bold; }
"Живой пример 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").hide("slow"); }); }); </script> </head> <body class="iframe"> <button>Hide 'em</button> <p>Hiya</p> <p>Such interesting text, eh?</p> </body> </html> <style> p { background:#dad; font-weight:bold; } </style>
Пример:
Анимировать все элементы span (слова в элементах), чтобы скрыть их, анимация выполняется со скоростью 200 миллисекунд. После того как анимация будет выполнена, анимация начинается заново.
"jQuery"
$("#hidr").click(function () {
$("span:last-child").hide("fast", function () {
// используйте callee чтобы не указывать имя функции
$(this).prev().hide("fast", arguments.callee);
});
});
$("#showr").click(function () {
$("span").show(2000);
});
"HTML"
<button id="hidr">Hide</button>
<button id="showr">Show</button>
<div>
<span>Once</span> <span>upon</span> <span>a</span>
<span>time</span> <span>there</span> <span>were</span>
<span>three</span> <span>programmers...</span>
</div>
"CSS"
span { background:#def3ca; padding:3px; float:left; }
"Живой пример 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(){ $("#hidr").click(function () { $("span:last-child").hide("fast", function () { // используйте callee чтобы не указывать имя функции $(this).prev().hide("fast", arguments.callee); }); }); $("#showr").click(function () { $("span").show(2000); }); }); </script> </head> <body class="iframe"> <button id="hidr">Hide</button> <button id="showr">Show</button> <div> <span>Once</span> <span>upon</span> <span>a</span> <span>time</span> <span>there</span> <span>were</span> <span>three</span> <span>programmers...</span> </div> </body> </html> <style> span { background:#def3ca; padding:3px; float:left; } </style>
Пример:
Скрывать элементы div по щелчку в течение 2 секунд, затем удалить div элемент. Проверьте нажатие более чем по одному элементу во время выполнения функции.
"jQuery"
for (var i = 0; i < 5; i++) {
$("<div>").appendTo(document.body);
}
$("div").click(function () {
$(this).hide(2000, function () {
$(this).remove();
});
});
"HTML"
<div></div>
"CSS"
div { background:#ece0fb; width:30px;
height:40px; margin:2px; float:left; }
"Живой пример 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(){ for (var i = 0; i < 5; i++) { $("<div>").appendTo(document.body); } $("div").click(function () { $(this).hide(2000, function () { $(this).remove(); }); }); }); </script> </head> <body class="iframe"> <div></div> </body> </html> <style> div { background:#ece0fb; width:30px; height:40px; margin:2px; float:left; } </style>
Версия jQuery 1.4.2
Документ создан 2010-08-21