jQuery функция .show()

Раздел: Эффекты jQuery

Описание: .show() Отображает соответствующие элементы.

.show() - функция может не принимать никаких аргументов. Показывает элемент посредством добавления стиля(css) display:block

Это примерно эквивалентно вызову

javascript:
 $("#element").css( "display", "block" );

Опции: .show( [ продолжительность ] , [ ослабление ] , [ функция ])

  1. Продолжительность - скорость эффекта
  2. Ослабление- функция смягчения для перехода.
  3. Функция вызываемая после завершения анимации.

Ослабление необязательная опция, по умолчанию swing, с постоянной скоростью, называется linear

Продолжительность представляется в миллисекундах; более высокое значение обозначает более медленную анимацию, а не быструю. Строка 'fast' и 'slow' могут быть представлены для обозначения продолжительности в 200 и 600 миллисекунд, соответственно.

javascript:
// 200 миллисекунд
 $( "#test" ).show( "fast" ); 
// 600 миллисекунд
 $( "#test" ).show( "slow" );
 // 2 секунды
 $( "#test" ).show( 2000 );

Живые примеры

Примеры использования встроенной функции jQuery.show()

Примеры использования встроенной функции без аргументов

Примеры использования используя Animation

Полный листинг

html:
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>show demo</title>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script >
</head>
<body>
<div id="test">
 <p>Примеры использования встроенной функции jQuery.show()</p>
 <p>Некий длинный длинный длинный длинный текст </p>
 <p>Некий длинный длинный длинный длинный текст </p>
</div> 
<div id="txtres"></div>
<p><input onClick="show()" class="button" value="Открыть без аргументов" type="button">
 <input onClick="show2()" class="button" value="Открыть используя Animation" type="button"></p>
<script>
function show(){
	$('#test').show();
	$('#txtres').html('<h2>Блок Открыт .hide()</h2>');
	return false;
}
function show2(){
	$( "#test" ).show( "slow", function() {
		$('#txtres').html('<h2>Блок Открыт, Animation complete</h2>');
	});
 return false;
}
</script >
</body>
</html>