Произошла ошибка.
Пожалуйста, обновите страницу.
Fly.js > Документация > Стили > $(...).animate()

$(...).animate()

Добавляет в очередь каждого элемента текущей FlyNode заданную анимацию.

#Стили

$(...).animate(style, animation)

                    FlyDomNode: {
                        __constructor: function(context) {
                            var array = fnNodeList.makeDomNodeArray(context);
                            for (var a = 0, al = array.length; a < al; a++) {
                                this[a] = array[a];
                            }
                            this.length = al;
                        },

                        size: function() {
                            return this.length;
                        },

                        get: function(index) {
                            return $.isNumber(index) ? this[index] : [].slice.call(this);
                        },

                        addNode: function(flyNode) {
                            return fnNodeList.changeNodeContext(this, flyNode, function(child, context) {
                                context.indexOf(child) === -1 && context.push(child);
                            });
                        },

                        removeNode: function(flyNode) {
                            return fnNodeList.changeNodeContext(this, flyNode, function(child, context) {
                                var position = context.indexOf(child);
                                if (position !== -1) context.splice(position, 1);
                            });
                        },

                        eq: function(index) {
                            if (index < 0) index = index + this.length;
                            return new this.__self(this[index]);
                        },

                        lt: function(index) {
                            return new this.__self(this.slice(0, index));
                        },

                        gt: function(index) {
                            return new this.__self(this.slice(index));
                        },

                        last: function(selector) {
                            var element = this[this.length - 1];
                            return new this.__self(fnStyle.isMatch(element, selector) ? element : []);
                        },

                        first: function(selector) {
                            var element = this[0];
                            return new this.__self(fnStyle.isMatch(element, selector) ? element : []);
                        },

                        normalize: function() {
                            return fnNodeList.transformNodeContext(this, function(item, context) {
                                if ($.isNode(item)) context.push(item);
                            });
                        },

                        each: function(callback, context) {
                            $.each(this, callback, context);
                            return this;
                        },

                        name: function() {
                            return this[0].tagName.toLowerCase() || null;
                        }
                    }

$(...).animate(style, animation)
Возвращает: FlyNode [$]

Добавляет в очередь каждого элемента текущей FlyNode заданную анимацию.

style: Array [] or Object {} or String ABC

Пресеты для стилизации элемента.

animation: Array [] or Object {} or String ABC

Пресеты для создания анимации.

Аргументы style и animation задают пресеты для стилизации и анимирования объекта. Они могут быть представлены строкой (названием пресета), объектом с опциями или массивом, содержащим строки и объекты. Каждый следующий элемент массива будет перезаписывать предыдущий с помощью функции $.extend().

Структуру пресета для аргумента style можно найти в документации методов $(...).stylize() и $(...).css().

Описание объекта пресета для метода $(...).animate().

complete: Function ()

Функция, которая выполняется после окончания анимации при любом исходе.

duration (default: 400): Number 123

Длительность анимации в миллисекундах.

easing (default: linear): String ABC

Функция зависимости прогресса от времени. Доступны следующие значения: linear, easeIn, easeOut, easeInOut, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInExpo, easeOutExpo, easeInOutExpo, easeInSine, easeOutSine, easeInOutSine, easeInCirc, easeOutCirc, easeInOutCirc, easeInBack, easeOutBack, easeInOutBack.

error: Function ()

Функция, вызываемая в случае прерывания анимации. Срабатывает для каждого элемента.

method (default: css): String ABC

Способ реализации анимации. Может принимать значения css (CSS Transitions) и js (JavaScript). Нужно отдавать предпочтение значению по умолчанию, но иногда может потребоваться JavaScript реализация (например, когда много элементов анимированы одновременно).

queue (default: true): Boolean !!

Флаг, отвечающий за постановку анимации в очередь. Если выставлен в значение false, то анимация начнётся немедленно после вызова метода $(...).animate().

step: Function ()

Функция, вызываемая каждый шаг анимации с аргументами progress (число от 0 до 1) и tween (объект с настройками анимации, который лучше не изменять).

success: Function ()

Функция, вызываемая после успешного окончания анимации. Срабатывает для каждого элемента.

Все функции вызыватся в контексте элемента, к которому относится анимация. Функции выполняются в следующем порядке: success, error, complete.

Пример: Использование функций в процессе анимирования.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <title>Fly.js - $(...).animate()</title>

        <script src="/scripts/fly.js"></script>
        <style>
            div {
                height: 30px; width: 30px;
                position: relative; background: #f0f;
            }
        </style>
    </head>
    <body>
        <button>Animate!</button>
        <div></div>
        <b id="process">Progress is 0%</b><br/>
        <b id="result"></b>

        <script>
            $('button').once('click', function() {
                $(this).attr('disabled', 'disabled');
                $('div').animate({
                    left: '+=200px'
                }, {
                    duration: 3000,
                    step: function(progress) {
                        $('#process').html('Progress is ' + Math.round(progress * 100) + '%');
                    },
                    success: function() {
                        $('#result').append('Success! ');
                    },
                    error: function() {
                        $('#result').append('Error! ');
                    },
                    complete: function() {
                        $('#result').append('Complete! ');
                    }
                });
            });
        </script>
    </body>
</html>

Пример: Использование easing-функций.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <title>Fly.js - $(...).animate()</title>

        <script src="/scripts/fly.js"></script>
        <style>
            div {
                height: 30px; width: 30px;
                position: relative; background: #0ff;
            }
        </style>
    </head>
    <body>
        <button>Animate!</button>
        <select>
            <option>linear</option>
            <option>easeIn</option><option>easeOut</option><option>easeInOut</option>
            <option>easeInQuad</option><option>easeOutQuad</option><option>easeInOutQuad</option>
            <option>easeInCubic</option><option>easeOutCubic</option><option>easeInOutCubic</option>
            <option>easeInQuart</option><option>easeOutQuart</option><option>easeInOutQuart</option>
            <option>easeInQuint</option><option>easeOutQuint</option><option>easeInOutQuint</option>
            <option>easeInExpo</option><option>easeOutExpo</option><option>easeInOutExpo</option>
            <option>easeInSine</option><option>easeOutSine</option><option>easeInOutSine</option>
            <option>easeInCirc</option><option>easeOutCirc</option><option>easeInOutCirc</option>
            <option>easeInBack</option><option>easeOutBack</option><option>easeInOutBack</option>
        </select>
        <div></div>

        <script>
            $.set('stylize', 'move', {left: '250px'});
            $.set('animate', 'slow', {duration: 1000});

            $('button').on('click', function() {
                var button = $(this);
                button.attr('disabled', 'disabled');
                $('div').animate('move', ['slow', {
                    complete: function() {
                        setTimeout($.proxy(function() {
                            $(this).css('left', '0px');
                            button.removeAttr('disabled');
                        }, this), 1000);
                    },
                    easing: $('select').val()
                }]);
            });
        </script>
    </body>
</html>

Пример: Анимирование теней.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <title>Fly.js - $(...).animate()</title>

        <script src="/scripts/fly.js"></script>
        <style>
            div {
                height: 50px; width: 50px;
                background: red; margin: 10px;
            }
        </style>
    </head>
    <body>
        <button>Animate!</button>
        <div></div>

        <script>
            $.set('stylize', 'shadow0', {boxShadow: 'none'});
            $.set('stylize', 'shadow1', {boxShadow: '10px 10px 10px red'});
            $.set('stylize', 'shadow2', {boxShadow: 'current, -10px -10px 10px green'});
            $.set('stylize', 'shadow3', {boxShadow: 'none, none, 0 0 10px 10px hsv(300,100,100)'});

            var counter = 0;
            $('button').on('click', function() {
                counter = ++counter % 4;
                $('div').animate('shadow' + counter);
            });
        </script>
    </body>
</html>