www.jQueryBook.ru - jQuery документация

 

Сегодня: 06 декабря 2016 года, Вторник
Раздел API на стадии наполнения...

 

 

 

  • Категории: EffectsCustom

    .animate()

    Выполняет пользовательские анимационные эффекты за счет изменения CSS-свойств элементов.

Синтаксис и описание:

  • Добавлено в jQuery 1.0.animate( params [, duration, easing, fn ])

  • Добавлено в jQuery 1.0.animate( params [, options ])

  • Функция для создания собственных анимационных эффектов, применяемых ко всем соответствующим элементам набора jQuery. Анимационные эффекты зключаются в изменении CSS-свойств от исходных (текущих) значений до конечных (заданных параметром params) в соответствии с дополнительными (необязательными) параметрами.

Возвращаемое значение: (объект) Набор jQuery.

Параметры:

  • params – (объект) Объект-хеш, задающий конечные значения CSS-стилей, которые должны быть достигнуты к моменту завершения анимационного эффекта. Конечные значения свойств стиля можно задавать абсолютными величинами или смещением относительно начальных значений. Например: += (положительное смещение), -= (отрицательное смещение). Перечень поддерживаемых свойств CSS-стилей ограничивается свойствами, принимающими числовые значения (по умолчанию в пикселах px, но можно указывать также суффикс em или % для соответствующих единиц измерения. (Можно также указывать одну из предопределенных строк hide, show или toggle, например, для такого свойства как opacity.) Начиная с jQuery 1.4, в качестве значения CSS-свойства может выступать массив (см. Примечание 2).

  • duration – (число | строка) Необязательный параметр - продолжительность воспроизведения эффекта в милисекундах или в соответствии с предопределенным значением (slow, normal или fast). Если данный параметр имеет значение отличное от slow и fast, то непрозрачность элементов изменяется со скоростью, соответствующей значению normal (400 милисекунд). Если параметр отсутствует, то анимационный эффект не воспроизводится (изменения CSS-свойств происходят мгновенно). Начиная с jQuery 1.3, если duration имеет значение 0, то все элементы набора jQuery, переходят в свое конечное состояние синхронно (до jQuery 1.3 данная операция производилась асинхронно).

  • easing – (строка) Необязательный параметр – имя функции реализации перехода, осуществляющей анимационный эффект (определяющей скорость перехода в различных точках в анимации). Эти функции должны обязательно регистрироваться по имени. Они предоставляются библиотекой jQuery, например: linear – линейный переход (равномерный), swing – колебательный переход (с небольшим ускорением к концу анимации), или в виде функций подключаемых модулей (Например, JQuery UI или плагин Easing Plugin).

  • fn – (функция) Необязательный параметр - функция, вызываемая после окончания воспроизведения эффекта анимации (по одному разу для каждого элемента набора jQuery и только по окончанию всех анимационных эффектов, стоящих в очереди на выполнение, для данного элемента). Вызывается без параметров. Контекст this вызова функции ссылается на текущий элемент (над которым выполняется операция).

  • options – (объект) Объект-хеш (необязательный параметр), задающий значения параметров анимационного эффекта (свойства):

    • duration – (число | строка) Продолжительность воспроизведения эффекта в милисекундах или в соответствии с предопределенным значением (slow, normal или fast). По умолчанию имеет значение normal.

    • easing – (строка) Имя функции реализации перехода, осуществляющей анимационный эффект. По умолчанию имеет значение swing.

    • complete – (функция) Функция, вызываемая после окончания воспроизведения эффекта анимации. Вызывается без параметров.

    • step – (функция) Функция, которая будет вызываться после каждого шага анимации.

    • queue – (boolean – логическое значение) По умолчанию имеет значение true. Если установлено значение false, то анимация воспроизводится немедленно (без очереди), параллельно со следующим эффектом.

    • specialEasing – (объект) Начиная с jQuery 1.4 - Объект-хеш, определяющий одно или несколько свойств CSS и соответствующие им функции реализации перехода. Т.е. можно для разных CSS-свойств задавать разные функции реализации перехода (easing).


        $('#button').click(function() {
              $('#jquerybook').animate({
                    width: 'toggle',
                    height: 'toggle'
              }, {
                    duration: 5000,
                    specialEasing: {
                          width: 'linear',
                          height: 'easeOutBounce' // easeOutBounce – функция дополнительно подключаемого плагина
                    },
                    complete: function() {
                          $(this).after('<div>Конец анимации.</div>');
                    }
              });
        });

  1. Примечание:

    При указании свойств CSS в параметре params используется стиль написания составных слов camel case  (горбы верблюда ), при котором несколько слов пишутся слитно без пробелов и дефисов, при этом каждое последующее слово пишется с большой буквы. Например, marginLeft  вместо margin-left.

  2. Примечание:

    Начиная с jQuery 1.4, в параметре params  в качестве значения CSS-свойства может выступать массив, первым элементом которого является само значение CSS, а вторым - имя функции реализации перехода для данного свойства. Если функция не определена в данной форме записи параметра params, то применяется значение указанное в параметре easing, либо функция swing  по умолчанию.


    Пример записи значения CSS-свойства в виде массива:

      $('#button').click(function() {
            $('#jquerybook').animate({
                  width: ['toggle', 'swing'],
                  height: ['toggle', 'swing'],
                  opacity: 'toggle' // Для свойства opacity будет применен линейный переход
            }, 5000, 'linear', function() {
                  $(this).after('<div>Конец анимации.</div>');
            });
      });

  3. Примечание:

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

  4. Примечание:

    Каждый анимационный эффект, применяемый к элементу, добавляется в очередь для исполнения. Несколько эффектов, примененных к элементу, будут выполняться последовательно. Чтобы эффекты запускались параллельно, необходимо установить параметр queue  в значение false.

  5. Примечание:

    JQuery UI расширяет возможности создания анимационных эффектов. (Например, с использованием нечисловых CSS-стилей, таких как цвет, или с использованием классов CSS, а не только отдельных атрибутов.)

Примеры:

  1.  

    
    
    
  2.  

    
    
    

[ наверх ]










 




Справочник по jQuery JavaScript API на русском языке