<分区>
我不是要比较 CSS3 特性和 Javascript，我是想知道在遇到这种情况时如何做出决定。我知道实现单个交互效果的三种方法，在这个例子中，当用户将鼠标悬停在 div 上时，内部元素将扩展它的宽度和高度。
在这种情况下，我想知道哪种方法最理想。需要考虑的事情，我将以现代浏览器为目标，我支持移动设备(iPad 和 iPhone)，我将使用 jQuery 和 Boostrap。
<强>1。使用 jQuery，它可以被编码成这样:
$('#js').hover(function(){
$('.inner',this).animate({'height':'200px', 'width':'200px'})
},function(){
$('.inner',this).animate({'height':'0px', 'width':'0px'})
})
<强>2。使用 CSS，它看起来像这样:
#css .inner {
-webkit-transition: width .3s, height .3s;
transition: width .3s, height .3s;
}
#css:hover .inner {
width: 200px;
height: 200px;
}
<强>3。最后，同时使用 JS 和 CSS
CSS
#css.hover .inner {
-webkit-transition: width .3s, height .3s;
transition: width .3s, height .3s;
}
#css.hover .inner {
width: 200px;
height: 200px;
}
JS
$('#css_js').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
})
我的 fiddle 在这里: http://jsfiddle.net/pk0cf25u/
最佳答案
其实是速度和浏览器兼容性的问题，下面会解释。
快速虎钳:
为页面上的元素设置动画的最快方法是使用浏览器内置库 (CSS)，因此使用 CSS 最快，然后同时使用 CSS 和 JS，最后使用 JS。
为什么 CSS/JS 方式比单独使用 JS 更快？
好吧，因为 JS 不需要计算然后对元素使用react，只是分配类是 JS 唯一的工作。
浏览器兼容性:
实际上 JS 和 jQ 的部分原因是因为这个原因，因为 CSS 并不总是与所有浏览器兼容，如果您也针对旧浏览器，有时需要使用这些库。因此，如果您的目标是旧浏览器，最有效的方法是使用 JS。
总结:
如果您的目标是新浏览器和您知道正在使用新浏览器的特殊用户，请始终尝试使用 CSS 而不是 JS。它更快、更可靠。
否则使用JS来获得更多的浏览器兼容性，但再次尝试尽可能避免JS处理和计算。
注意:
我还没有实际测试过速度，但如果你想要每个场景的确切处理速度，我相信有数百个好的网站可以让你测试它们。
关于jquery - 什么时候在 CSS3 上使用 javascript 是正确的，反之亦然？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25222331/