Smooth.js — jQuery-плагин для CSS3-transitions с даунгрейдом до $.animate

CSS3-транзишены — чертовски полезная штука. По сравнению с javascript-анимацией они:

1. Обеспечивают более плавные переходы;
2. Потребляют меньше ресурсов;
3. Открывают новые возможности. Например, автоматическую обработку матричных преобразований (CSS-transforms);

Конечно, наш с вами любимый IE их не поддерживает даже в 9 версии.

Логичным выходом было бы в случае IE выполнять анимацию традиционным способом, например через $.animate. Предлагаю в таких случаях использовать плагин Smooth.js ^[1], который сделает это за вас.

Синтаксис

Синтаксис предельно прост и максимально приближен к jQuery.animate:

$("#subject).smooth({
    width: "40px",
    transform: "rotate(-45deg)",
    background: "#cbf"
}, {
    duration: 2000,
    easing: "swing"
});

Первый параметр — список свойств для анимации, второй — настройки анимации. В настройках пока только duration (длительность в мс) и easing(имя сглаживающей функции).

Последовательная анимация

Функция возвращает объект $.Deferred(), так что вы легко сможете выполнить несколько анимаций последовательно:

$("#subject).smooth({
    width: "40px"
}).done(function() {
    $("#subject).smooth({
        transform: "rotate(-45deg)",
    ));

Режимы работы

Плагин может работать в одном из двух режимов — «css» и 'jquery". При инициализации пытается установить режим в css, в случае использования ie — в «jquery». Режим можно установить вручную в любой момент:

    $.fn.smooth.configure({
        mode: "jquery"
    });

Заключение

Подробнее о транзишенах можно прочитать здесь ^[2]
Буду благодарен за фидбек по плагину.

Автор: alevkon