27

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

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

我正在尝试在滑块内设置从一个 div 到下一个 div 的淡入淡出

4

2 回答 2

44

步骤 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 步)更好的供应商前缀......您可以使用 jQuery 来决定要使用的供应商前缀,而不是向元素添加大量不必要的 CSS(只会被浏览器忽略):

$('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属性将不会被设置动画。

于 2012-04-19T22:27:03.537 回答
6

处理 CSS3 过渡时,您的代码会很快变得混乱。我会推荐使用一个插件,比如处理 CSS3 动画/过渡的复杂性的jQuery Transit

此外,该插件使用 webkit-transform 而不是 webkit-transition,它允许移动设备使用硬件加速,以便在动画发生时为您的 Web 应用程序提供原生的外观和感觉。

JS Fiddle 现场演示

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 });

});

获得跨浏览器兼容性的大部分艰苦工作也是为您完成的,它在移动设备上就像一个魅力。

于 2013-03-11T18:45:29.450 回答