jQuery свойство $.fx.off

Определение и применение

jQuery свойство глобального объекта $.fx.off позволяет глобально отключить все анимации.

Обращаю Ваше внимание, что когда для свойства $.fx.off установлено значение true, то все методы анимации, немедленно будут устанавливать элементы в их конечное состояние при вызове, без отображения эффекта анимации.

jQuery синтаксис:

Синтаксис 1.3:
$.fx.off =  value

value - Boolean

Добавлен в версии jQuery

1.3

Значения параметров

Параметр	Описание
value	Логическое значение, которое определяет следует ли проигрывать анимацию в обычном режиме, или отключить все анимации глобально. Значение по умолчанию false (анимация проигрывается в обычном режиме).

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование свойства глобального объекта $.fx.off</title>
		<style>body {
	position: relative; /* элемент с относительным позиционированием */			
}	
div {
	width: 80px; /* ширина элемента */	
	height: 80px; /* высота элемента */	
	border: 1px solid violet; /* сплошная граница размером 1 пиксель цвета violet */	
	margin-top: 50px; /* внешний отступ от верхнего края элемента */
	position: absolute; /* элемент с абсолютным позиционированием */		
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  var initialPosition = $( "div" ).offset().left; // получаем позицию элемента от левого края документа в пикселях
	  $( ".left" ).click(function(){ // задаем функцию при нажатии на элемент с классом left 
	    $( "div" ).animate({left: 0}); // анимируем смещение элемента влево относительно документа
	  });
	  $( ".right" ).click(function(){ // задаем функцию при нажатии на элемент с классом right 
	    var currentPosition = $( "div" ).offset().left; // получаем позицию элемента от левого края документа в пикселях
	    if ( currentPosition == initialPosition ) { // если текущая позиция соответствует первоначальный
	      $( "div" ).removeAttr( "style" ) // удаляем атрибут style у элемента
	                .animate({right: 0}); // анимируем смещение элемента вправо относительно документа
	    }  
	  });
	  $( ".off" ).click(function(){ // задаем функцию при нажатии на элемент с классом off 
	    $.fx.off = !$.fx.off; // устанавливаем противоположное значение свойству
	    $.fx.off ? $( "span" ).css( "color", "red" ).html( " Animation disabled" ) : // если true устанавливаем цвет текста красный и вставляем текстовое содержимое
		       $( "span" ).css( "color", "green" ).html( " Animation enabled" ) // если false устанавливаем цвет текста зеленый и вставляем текстовое содержимое
	  });
	});
		</script>
	</head>
	<body>
		<button class = "left">Left</button>
		<button class = "right">Right</button>
		<button class = "off">$.fx.off</button>
		<span></span>
		<div>Animate me</div>
	</body>
</html>

В этом примере при загрузке документа мы с использованием jQuery методa .offset() получаем позицию элемента от левого края документа в пикселях и записываем это значение в переменную, это нам пригодиться далее для корректного воспроизведения анимации.

Кроме того, мы разместили в документе три кнопки (элементы <button>), для каждой назначили обработчик события "click" (клик левой кнопкой мыши):

При нажатии на элемент с классом left вызываем функцию, которая с помощью метода .animate() анимирует смещение элемента влево относительно документа.
При нажатии на элемент с классом right вызываем функцию, которая получает позицию элемента от левого края документа в пикселях и если это значение совпадает с первоначальным (полученным при загрузке), то с помощью метода .animate() анимирует смещение элемента вправо относительно документа. Эта проверка необходима для того, чтобы избежать возможности вызвать анимацию, когда элемент уже находиться у правого края документа. Кроме того, мы с помощью метода .removeAttr() удаляем у элемента глобальный атрибут style, это необходимо, чтобы убрать значение, установленное для CSS свойства left и воспроизвести анимацию неоднократно, иначе после нажатия на элемент с классом left смещение элемента вправо не произойдет.
При нажатии на элемент с классом off вызываем функцию, которая устанавливает противоположное значение свойству глобального объекта $.fx.off (если true, то false и наоборот). Кроме того, используя тернарный оператор в зависимости от текущего значения устанавливаем с помощью jQuery метода .css() цвет текста и с помощью jQuery метода .html() вставляем текстовое содержимое.

Результат нашего примера:

Пример использования свойства глобального объекта $.fx.off.

jQuery эффекты