.show( )
Возвращает: jQuery
Описание: Отображает соответствующие элементы.
.show()
Добавлена в версию: 1.0
.show( продолжительность, [ вызов ] )
Добавлена в версию: 1.0
Строка или число, определяющие, как долго анимация будет работать.
вызов
Функция вызываемая после завершения анимации.
.show( [ продолжительность ], [ ослабление ], [ вызов ] )
Добавлена в версию: 1.4.3
Строка или число, определяющие, как долго анимация будет работать.
ослабление
Строка, указывающая какая функция ослабления будет использоватся для перехода.
вызов
Функция вызываемая после завершения анимации.
Без параметров, метод .show() самый простой способ отобразить элемент:
$('.target').show();
Соответствующие элементы будут показаны сразу, без анимации. Это примерно эквивалентно вызову .css('display', 'block'), за исключением того, что свойство display возвращается к тому, что было первоначально.
Если элемент имел display в значении inline, а затем в hidden или shown, он снова будет отображаться inline.
Если представленна продолжительность, .show() становится методом анимации. Метод .show() анимирует ширину, высоту, и затененность соответствующих элементов одновременно.
Продолжительность представляется в милисекундах; более высокое значение обозночает более медленную анимацию, а не быструю. Строка 'fast' и 'slow' могут быть представленны для обозначения продолжительности в 200 и 600 милисекунд, соответственно.
Если указанна, функция обратного вызова, то она вызывается после завершения анимации. Это может быть полезно для нанизывания различных анимаций вместе в определенной последовательности. В функцию обратного вызова не передается никаких аргументов, но this является элементом DOM, который анимируется. Если многочисленные элементы анимируются, важно отметить, что функция обратного вызова вызывается единожды для каждого соответствующего элемента, а не один раз в целом на анимацию.
Мы можем анимировать любой элемент, например, простое изображение:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially hidden, we can show it slowly:
$('#clickme').click(function() {
$('#book').show('slow', function() {
// Animation complete.
});
});
Примеры
Пример 1
Отображает все параграфы.$("p").show()
Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").show() }); </script> </head> <body> <p style="display:none">Hello 1</p> lt;/body> </html>
Пример 2
Медленно отображает все скрытые параграфы, длительность анимационных эффектов — 600 миллисекунд.Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("button").click(function () { $("p").show("slow"); }); }); </script> <style> p { background:yellow; } </style> </head> <body> <button>Show it</button> <p style="display: none">Hello 2</p> </body> </html>
Пример 3
Отображает все скрытые элементы div по порядку, используя режим скорости fast. Каждая анимация занимает 200 миллисекунд. По завершению очередной анимации начинается следующая.Пример 3 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("#showr").click(function () { $("div:eq(0)").show("fast", function () { // use callee so don't have to name the function $(this).next().show("fast", arguments.callee); }); }); $("#hidr").click(function () { $("div").hide(2000); }); }); </script> <style> div { background:#def3ca; margin:3px; width:80px; display:none; float:left; text-align:center; } </style> </head> <body> <button id="showr">Show</button> <button id="hidr">Hide</button> <div>Hello 3,</div> <div>how</div> <div>are</div> <div>you?</div> </body> </html>
Пример 4
Отображает все скрытые элементы span и input по порядку, используя режим скорости normal. По завершению анимации меняет текст параграфа. function doIt() {
$("span,div").show("normal");
}
$("button").click(doIt); // can pass in function name
$("form").submit(function () {
if ($("input").val() == "yes") {
$("p").show(4000, function () {
$(this).text("Ok, DONE! (now showing)");
});
}
$("span,div").hide("normal");
return false; // to stop the submit
});
Пример 4 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ function doIt() { $("span,div").show("normal"); } $("button").click(doIt); // can pass in function name $("form").submit(function () { if ($("input").val() == "yes") { $("p").show(4000, function () { $(this).text("Ok, DONE! (now showing)"); }); } $("span,div").hide("normal"); return false; // to stop the submit }); }); </script> <style> span { display:none; } div { display:none; } p { font-weight:bold; background-color:#fcd; } </style> </head> <body> <button>Do it!</button> <span>Are you sure? (type 'yes' if you are) </span> <div> <form> <input type="text" value="as;ldkfjalsdf"/> </form> </div> <p style="display:none;">I'm hidden...</p> </body> </html>
Была ли эта информация полезной?
