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

jQuery эффекты

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

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></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" (клик левой кнопкой мыши):


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

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