当我在代码中添加过渡线时,它会破坏jQuery。我该如何解决?

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

我正在尝试在滑块内设置从一个div到另一个div的渐变

最佳答案

步骤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)供应商前缀...没有浏览器使用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)更好的供应商前缀...无需使用大量不必要的CSS元素(浏览器将忽略它们),您可以使用jQuery来决定要使用的供应商前缀:
$('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属性将不会生效。

关于jquery - jQuery .css()内的CSS3过渡,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10237731/

10-12 12:51
查看更多