jQuery中的CSS3转换.css（）

Question

当我将转换线添加到我的代码中时，它会中断jQuery。我该如何解决它？

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

我想淡入设置从一个div来滑块

Answer 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）销售者前缀......没有浏览器使用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添加到元素中（浏览器将忽略这些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财产不会被动画。

Answer 2

在处理CSS3转换时，您的代码可能会变得杂乱无章。我会推荐使用一个插件，如​​来处理CSS3动画/转换的复杂性。

此外，该插件使用webkit转换而不是webkit转换，它允许移动设备使用硬件加速，以便在动画发生时为您的web应用提供本机外观和感觉。

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

}); 

最让跨浏览器兼容的辛勤工作是你要做的事，它的工作原理是在移动设备上的魅力。