jQuery .css()中的CSS3转换
jQuery .css()中的CSS3转换
提问于 2012-04-20 06:26:14
当我将转换行添加到我的代码中时，它会破坏jQuery。我怎么才能修复它？
a(this).next().css({
left: c,
transition: 'opacity 1s ease-in-out'
});我正在尝试在一个滑块中设置从一个div到下一个div的淡入淡出
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-04-20 06:27:04
步骤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属性进行动画设置。
Stack Overflow用户
发布于 2013-03-12 02:45:29
在处理CSS3转换时，您的代码可能会很快变得混乱。我建议使用诸如jQuery Transit之类的插件来处理复杂的CSS3动画/过渡。
此外，该插件使用webkit-transform而不是webkit-transition，这允许移动设备使用硬件加速，以便在动画发生时为您的web应用程序提供原生的外观和感觉。
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 });
});获得跨浏览器兼容性的大部分艰苦工作也都是为您完成的，它在移动设备上的工作就像一个魔咒。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10237731
复制相关文章
相似问题
腾讯云开发者
