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

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

Описание: .hide() Скрывает соответствующие элементы.

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

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

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

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

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

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

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

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

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

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

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

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

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

html:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script >
</head>
<body>

<div id="test">
  <p>Примеры использования встроенной функции jQuery.hide()</p>
  <p>Некий длинный длинный длинный длинный  текст </p>
  <p>Некий длинный длинный длинный длинный  текст </p>
</div> 
  
<div id="txtres"></div>
  
<p><input onClick="hide()" class="button" value="Скрыть без аргументов"  type="button">
  <input onClick="hide2()" class="button" value="Скрыть используя Animation"  type="button"></p>
 
<script>
  
function hide(){
	$('#test').hide();
	$('#txtres').html('<h2>Блок скрыт .hide()</h2>');
	return false;
}

function hide2(){
	$( "#test" ).hide( "slow", function() {
		$('#txtres').html('<h2>Блок скрыт, Animation complete</h2>');
	});
  return false;
}

  
</script >
 
</body>
</html>