Статьи

jQuery Кратко: jQuery Эффекты

Ноябрь 2, 2018

Отключить все методы эффектов jQuery

Можно отключить все методы анимации, которые предоставляет jQuery, просто установив для свойства off значение true .

01
02
03
04
05
06
07
08
09
10
11
12
<!DOCTYPE html>
<html lang=»en»>
<body>
    <div style=»height: 100px; width: 100px; background-color: red; position: absolute;
        left: 20px;»>Try to animate me! </div>
    <script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
    <script> (function($) {
     jQuery.fx.off = true;
     $(‘div’).slideUp();
 })(jQuery);
</body>
</html>

Если для параметра off установлено значение true , все методы эффекта не будут анимированы, а вместо этого будут скрыты и сразу же показаны с использованием правил CSS display:none и display:block Вы можете снова включить анимацию, передав свойству off false значение.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang=»en»>
<body>
    <div style=»height: 100px; width: 100px; background-color: red; position: absolute;
        left: 20px;»>
        Try to animate me!
    </div>
    <script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
    <script> (function ($) {
     jQuery.fx.off = true;
     $(‘div’).slideUp();
     jQuery.fx.off = false;
     $(‘div’).slideDown();
 })(jQuery);
</body>
</html>

Grokking the stop () Метод анимации

Часто необходимо остановить текущую анимацию перед запуском другой. Например, при использовании пользовательских mouseenter и mouseleave (или метода hover() ) вы можете непреднамеренно вызвать элемент, который уже анимируется из-за предыдущего mouseenter или mouseleave . Это вызывает накопление анимации в очереди, что приводит к вялому интерфейсу. Чтобы избежать этого, просто используйте метод stop() чтобы остановить текущую анимацию перед запуском новой.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<!DOCTYPE html>
<html lang=»en»>
<body>
    <div style=»height: 100px; width: 100px; background-color: red; position: absolute;
        left: 20px;»>
        Hover over Me!
    </div>
    <script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
    <script> (function ($) {
      $(‘div’).hover(function ()
      { $(this).stop().animate({ left: 75 }, ‘fast’);
        function () { $(this).stop().animate({ left: 20 }, ‘fast’);
  })(jQuery);
</body>
</html>

Удалите методы stop() из кода и наведите указатель мыши на элемент несколько раз, чтобы увидеть, что происходят призрачные анимации. Непрерывное перемещение по элементу на странице приведет к созданию анимации, которая обычно не является желаемым результатом.

Примечания. Кроме того, можно не только остановить текущую анимацию в очереди для элемента select, но и всю очередь, передав методу stop() параметр true. Это эффективно остановит все анимации в очереди, активные и неактивные.

Определение анимирования элемента с помощью: animated

Фильтр custom :animated selector может использоваться для выбора элементов, которые в данный момент анимируются. Ниже я использую этот пользовательский фильтр выбора, чтобы добавить текст в анимирующий элемент <div> .

01
02
03
04
05
06
07
08
09
10
11
12
<!DOCTYPE html>
<html lang=»en»>
<body>
    <div style=»height: 100px; width: 100px; background-color: red; color: white»></div>
    <script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
    <script> (function ($) {
      function recursiveAnimate()
      { $(‘div’).slideToggle(‘slow’, recursiveAnimate);
      recursiveAnimate();
  })(jQuery);
</body>
</html>

Использование show (), hide () и toggle () без анимации

Использование методов show() , hide() и toggle() с параметром приведет к тому, что элементы будут отображаться или скрываться для анимации путем изменения свойств CSS: высоты, ширины, непрозрачности, полей, отступов. Можно пропустить анимацию для скрытия и отображения элементов, просто не передавая никаких параметров. Это меняет то, как эти методы корректируют видимость элемента. Затронутые элементы просто появятся или исчезнут без какой-либо анимации, настроив вместо этого свойство display CSS.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang=»en»>
<head>
    <style type=»text/css»>
        div
        {
            height: 100px;
            width: 100px;
            background-color: red;
            color: white;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>Click Me (hide animation)</div>
    <div>Click Me (hide no animation)</div>
    <script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
    <script> (function ($) {
      // Hide with animation
      $(‘div:first’).click(function () { $(this).hide(1000) });
      // Hide no animation
      $(‘div:last’).click(function () { $(this).hide() });
  })(jQuery);
</body>
</html>

Примечания. Методы jQuery hide() , show() , toggle() , slideUp() , slideDown() , slideToggle() при использовании для элементов, имеющих inline значение display CSS, будут изменены на display:block для продолжительность анимации.

Гроккинг последовательных и непоследовательных анимаций

Важно понимать разницу между анимациями, которые происходят одновременно, и анимациями, которые происходят в последовательном порядке с течением времени. По умолчанию, когда методы эффектов объединены в цепочку, они добавляются в очередь, и каждый эффект возникает один за другим.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang=»en»>
<body>
    <div style=»height: 100px; width: 100px; background-color: red; position: absolute;
        left: 20px;
        Animate me!
    </div>
    <div style=»height: 100px; width: 100px; background-color: red; position: absolute;
        left: 20px;
        Animate me!
    </div>
    <script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
    <script> (function ($) {
     // Each effect is added to a queue and occurs sequentially
     $(‘div:first’).slideUp(‘slow’).slideDown(‘slow’).hide(‘slow’);
     // Each method is added to a queue and occurs sequentially
     $(‘div:last’).animate({ width: ‘200px’ }, 1000).animate({ borderLeftWidth: ’10px’ }, 1000);
 })(jQuery);
</body>
</html>

Используя метод animate() , вы можете настроить анимацию так, чтобы она происходила не последовательно или одновременно, передав все изменения свойств CSS в один вызов метода animate() . В приведенном ниже коде <div> будет анимировать свою ширину и ширину левой границы.

01
02
03
04
05
06
07
08
09
10
11
12
<!DOCTYPE html>
<html lang=»en»>
<body>
    <div style=»height: 100px; width: 100px; background-color: red; position: absolute;
        left: 20px;
    <script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
    <script> (function($){
     // Both width and borderLeftWidth properties will animate simultaneously
     $(‘div’).animate({ width: ‘200px’, borderLeftWidth: ’10px’ }, 1000);
 })(jQuery);
</body>
</html>

Animate () — базовая низкоуровневая абстракция

Метод animate() является базовым методом, который используется для создания всех предварительно настроенных анимаций, например, hide() , slideDown() . Предоставляет возможность изменять (со временем) значения свойств стиля.

Вот что вам нужно знать при использовании этого метода.

  • Поддерживаются только свойства, которые принимают числовые значения. Другими словами, вы не можете анимировать значение, скажем, свойства backgroundColor (по крайней мере, без плагина ). Кроме того, свойства, которые принимают более одного значения, например backgroundPosition не могут быть анимированы.
  • Вы можете анимировать свойства CSS, используя em и%, где это применимо.
  • Относительные анимации можно указать с помощью «+ =» или «- =» перед значением свойства. Это, например, переместит элемент положительно или отрицательно относительно его текущей позиции.
  • Если указать продолжительность анимации 0, анимация немедленно установит элементы в их конечное состояние.
  • В качестве ярлыка, если передано значение toggle , анимация просто перевернется с того места, где она находится, и анимируется с этой целью.
  • Все свойства CSS, заданные с помощью одного метода animate() будут анимированы одновременно.

Гроккинг jQuery Fading Методы

При использовании fadeIn() , fadeOut() и fadeTo() необходимо вызывать три концепции.

  • В отличие от других методов эффектов, методы затухания регулируют только непрозрачность элемента. Предполагается, что при использовании этих методов эффекта любой исчезающий элемент уже имеет высоту и ширину.
  • Затухающие анимации будут затенять элементы от их текущей непрозрачности.
  • Использование fadeOut() приведет к исчезновению элемента из его текущей непрозрачности, а затем после исчезновения на 100% свойство CSS элемента изменится на "none" .

Каждый из вышеупомянутых пунктов иллюстрируется приведенным ниже кодом.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang=»en»>
<body>
    <!— Elements being faded should have a width and height —>
    <div style=»height: 100px; width: 100px; background-color: red;»></div>
    <button>Fade the rest of the way</button>
    <script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
    <script> (function ($) {
$(‘div’).fadeTo(‘slow’, 0.50);
      $(‘button’).click(function () {
          // Fade from current opacity to zero,
          // and then hide element via display:none
          $(‘div’).fadeOut(‘slow’);
      });
  })(jQuery);
</body>
</html>
34
Share: