jQuery .css（）中的CSS3转换

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

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

我正试图在滑块内设置从一个div到下一个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） Vender-prefixes …没有浏览器使用transition因为它是标准，即使在最新的浏览器中，这也是一个实验性function：

 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属性的动画。

Answer 2

在处理CSS3转换时，您的代码可能会变得混乱。 我建议使用jQuery Transit这样的插件来处理CSS3动画/转换的复杂性。

此外，该插件使用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 }); }); 

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