Переходы CSS3 внутри jQuery.css()

Когда я добавляю строку перехода в свой код, она прерывает jQuery. Как я могу это исправить?

a(this).next().css({
    left: c,
    transition: 'opacity 1s ease-in-out'
});

Я пытаюсь настроить выцветание от одного div до следующего внутри слайдера

Ответ 1

Шаг 1) Удалите полуточку, это объект, который вы создаете...

a(this).next().css({
    left       : c,
    transition : 'opacity 1s ease-in-out';
});

a(this).next().css({
    left       : c,
    transition : 'opacity 1s ease-in-out'
});

Шаг 2) Vender-префиксы... никакие браузеры не используют transition, поскольку это стандарт, и это экспериментальная функция даже в последних браузерах:

a(this).next().css({
    left             : c,
    WebkitTransition : 'opacity 1s ease-in-out',
    MozTransition    : 'opacity 1s ease-in-out',
    MsTransition     : 'opacity 1s ease-in-out',
    OTransition      : 'opacity 1s ease-in-out',
    transition       : 'opacity 1s ease-in-out'
});

Вот демонстрационная версия: http://jsfiddle.net/83FsJ/

Шаг 3) Лучше префикс vender... Вместо того, чтобы добавлять тонны ненужных CSS к элементам (которые будут просто игнорироваться браузером), вы можете использовать jQuery, чтобы решить, какой vender-префикс Применение:

$('a').on('click', function () {
    var myTransition = ($.browser.webkit)  ? '-webkit-transition' :
                       ($.browser.mozilla) ? '-moz-transition' : 
                       ($.browser.msie)    ? '-ms-transition' :
                       ($.browser.opera)   ? '-o-transition' : 'transition',
        myCSSObj     = { opacity : 1 };

    myCSSObj[myTransition] = 'opacity 1s ease-in-out';
    $(this).next().css(myCSSObj);
});

Вот демонстрационная версия: http://jsfiddle.net/83FsJ/1/

Также обратите внимание, что если вы укажете в своем объявлении transition, что свойство для анимации opacity, установка свойства left не будет анимирована.

Ответ 2

Ваш код может стать беспорядочным при работе с переходами CSS3. Я бы рекомендовал использовать плагин, например jQuery Transit, который обрабатывает сложность анимаций/переходов CSS3.

Кроме того, плагин использует webkit-transform, а не webkit-переход, что позволяет мобильным устройствам использовать аппаратное ускорение, чтобы придать вашим веб-приложениям внешний вид и внешний вид при анимации.

JS Fiddle Live Demo

JavaScript:

$("#startTransition").on("click", function()
{

    if( $(".boxOne").is(":visible")) 
    {
        $(".boxOne").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxOne").hide(); });
        $(".boxTwo").css({ x: '100%' });
        $(".boxTwo").show().transition({ x: '0%', opacity: 1.0 });
        return;        
    }

    $(".boxTwo").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxTwo").hide(); });
    $(".boxOne").css({ x: '100%' });
    $(".boxOne").show().transition({ x: '0%', opacity: 1.0 });

});

Большая часть тяжелой работы по обеспечению совместимости с кросс-браузером выполняется и для вас, и она работает как шарм на мобильных устройствах.