Jquery 什么时候可以在CSS3上使用javascript，反之亦然？

我并不是要比较CSS3的特性和Javascript，我只是想知道在遇到这种情况时如何决定。我知道实现单一交互效果的三种方法，在本例中，当用户将鼠标悬停在

div

上时，内部元素将扩展其宽度和高度

在这种情况下，我想知道哪种方法最理想。要考虑的事情，我将针对现代浏览器，我支持移动设备（iPad和iPhone），我将使用jQuery和BooSupp.

1。使用jQuery，可以将其编码为如下内容：

$('#js').hover(function(){
    $('.inner',this).animate({'height':'200px', 'width':'200px'})
},function(){
    $('.inner',this).animate({'height':'0px', 'width':'0px'})
})

#css .inner { 
    -webkit-transition: width .3s, height .3s;
    transition: width .3s, height .3s;
}
#css:hover .inner {
    width: 200px;
    height: 200px;
}

2。使用CSS，它看起来像这样：

$('#js').hover(function(){
    $('.inner',this).animate({'height':'200px', 'width':'200px'})
},function(){
    $('.inner',this).animate({'height':'0px', 'width':'0px'})
})

#css .inner { 
    -webkit-transition: width .3s, height .3s;
    transition: width .3s, height .3s;
}
#css:hover .inner {
    width: 200px;
    height: 200px;
}

3。最后，使用JS和CSS

#css.hover .inner { 
    -webkit-transition: width .3s, height .3s; 
    transition: width .3s, height .3s;
}
#css.hover .inner {
    width: 200px;
    height: 200px;
}

$('#css_js').hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
})  

CSS

#css.hover .inner { 
    -webkit-transition: width .3s, height .3s; 
    transition: width .3s, height .3s;
}
#css.hover .inner {
    width: 200px;
    height: 200px;
}

$('#css_js').hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
})  

JS

#css.hover .inner { 
    -webkit-transition: width .3s, height .3s; 
    transition: width .3s, height .3s;
}
#css.hover .inner {
    width: 200px;
    height: 200px;
}

$('#css_js').hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
})  

---

我的小提琴在这里：

这实际上是速度和浏览器兼容性的问题，下面将对此进行解释

快速虎钳：

$('#js').hover(function(){
    $('.inner',this).animate({'height':'200px', 'width':'200px'})
},function(){
    $('.inner',this).animate({'height':'0px', 'width':'0px'})
})

#css .inner { 
    -webkit-transition: width .3s, height .3s;
    transition: width .3s, height .3s;
}
#css:hover .inner {
    width: 200px;
    height: 200px;
}

为页面上的元素设置动画的最快方法是使用浏览器内置库（CSS），因此使用CSS最快，然后使用CSS和JS，最后使用JS

为什么CSS/JS比单独的JS快？

很简单，因为JS不需要计算然后对元素做出反应，只需分配类就是JS的唯一工作

浏览器兼容性：

$('#js').hover(function(){
    $('.inner',this).animate({'height':'200px', 'width':'200px'})
},function(){
    $('.inner',this).animate({'height':'0px', 'width':'0px'})
})

#css .inner { 
    -webkit-transition: width .3s, height .3s;
    transition: width .3s, height .3s;
}
#css:hover .inner {
    width: 200px;
    height: 200px;
}

实际上，JS和jQ的制作部分是因为这个原因，因为CSS并不总是与所有浏览器兼容，如果你也针对旧浏览器，有时需要使用这些库。因此，如果你瞄准旧浏览器，最有效的方法就是使用JS

总而言之：

$('#js').hover(function(){
    $('.inner',this).animate({'height':'200px', 'width':'200px'})
},function(){
    $('.inner',this).animate({'height':'0px', 'width':'0px'})
})

#css .inner { 
    -webkit-transition: width .3s, height .3s;
    transition: width .3s, height .3s;
}
#css:hover .inner {
    width: 200px;
    height: 200px;
}

如果你的目标是新浏览器和你知道正在使用新浏览器的特殊用户，那么一定要尝试使用CSS而不是JS。它更快更可靠

否则，请使用JS获得更多的浏览器兼容性，但再次尝试尽可能避免JS处理和计算

注意：

$('#js').hover(function(){
    $('.inner',this).animate({'height':'200px', 'width':'200px'})
},function(){
    $('.inner',this).animate({'height':'0px', 'width':'0px'})
})

#css .inner { 
    -webkit-transition: width .3s, height .3s;
    transition: width .3s, height .3s;
}
#css:hover .inner {
    width: 200px;
    height: 200px;
}

---

我还没有实际测试速度，但是如果你想要每个场景的准确处理速度，我相信有数百个好网站可以测试它们。

实际上是速度和浏览器兼容性的问题，下面将对此进行解释

快速虎钳：

$('#js').hover(function(){
    $('.inner',this).animate({'height':'200px', 'width':'200px'})
},function(){
    $('.inner',this).animate({'height':'0px', 'width':'0px'})
})

#css .inner { 
    -webkit-transition: width .3s, height .3s;
    transition: width .3s, height .3s;
}
#css:hover .inner {
    width: 200px;
    height: 200px;
}

为页面上的元素设置动画的最快方法是使用浏览器内置库（CSS），因此使用CSS最快，然后使用CSS和JS，最后使用JS

为什么CSS/JS比单独的JS快？

很简单，因为JS不需要计算然后对元素做出反应，只需分配类就是JS的唯一工作

浏览器兼容性：

$('#js').hover(function(){
    $('.inner',this).animate({'height':'200px', 'width':'200px'})
},function(){
    $('.inner',this).animate({'height':'0px', 'width':'0px'})
})

#css .inner { 
    -webkit-transition: width .3s, height .3s;
    transition: width .3s, height .3s;
}
#css:hover .inner {
    width: 200px;
    height: 200px;
}

实际上，JS和jQ的制作部分是因为这个原因，因为CSS并不总是与所有浏览器兼容，如果你也针对旧浏览器，有时需要使用这些库。因此，如果你瞄准旧浏览器，最有效的方法就是使用JS

总而言之：

$('#js').hover(function(){
    $('.inner',this).animate({'height':'200px', 'width':'200px'})
},function(){
    $('.inner',this).animate({'height':'0px', 'width':'0px'})
})

#css .inner { 
    -webkit-transition: width .3s, height .3s;
    transition: width .3s, height .3s;
}
#css:hover .inner {
    width: 200px;
    height: 200px;
}

如果你的目标是新浏览器和你知道正在使用新浏览器的特殊用户，那么一定要尝试使用CSS而不是JS。它更快更可靠

否则，请使用JS获得更多的浏览器兼容性，但再次尝试尽可能避免JS处理和计算

注意：

$('#js').hover(function(){
    $('.inner',this).animate({'height':'200px', 'width':'200px'})
},function(){
    $('.inner',this).animate({'height':'0px', 'width':'0px'})
})

#css .inner { 
    -webkit-transition: width .3s, height .3s;
    transition: width .3s, height .3s;
}
#css:hover .inner {
    width: 200px;
    height: 200px;
}

我还没有实际测试过速度，但是如果你想要每个场景的准确处理速度，我相信有数百个好网站可以测试它们；DR

将CSS用于表示和琐碎的行为任务。在行为任务和目标浏览器无法使用CSS的任务中使用Javascript

---

CSS和JavaScript重叠太多，在选择它们时，性能不是唯一要考虑的事情。您还应该考虑关注点分离、用户体验和浏览器兼容性

关注点分离

如果任务纯粹是演示（例如，在悬停时更改按钮的颜色），请使用CSS。如果任务明显是行为性的（例如，

div

click/touch/point消失），请使用Javascript。遵循这个简单的规则可以保持代码可读性、可维护性和通用性。它还允许在一个领域比另一个领域更熟练的人之间分配任务

浏览器性能和用户体验

使用Javascript操作DOM可能比使用CSS执行相同的操作更昂贵。这是因为DOM的Javascript操作是由开发人员（容易出错）在UI线程和CPU上完成的，其中CSS由浏览器控制，允许在可能的情况下将任务卸载到后台线程或GPU

以jQuery为例。检查

div

会发现

div

的

style

属性每几分之一秒都在被操作。这意味着在UI线程上每隔几秒钟就会触发一个Javascript勾号事件。浏览器必须重新计算

div

、其子项、其取消项和文档本身的新样式（回流）。然后，必须重新绘制页面，然后重新开始该过程，从而降低操作性能、设备和电池寿命

动画尤其受到影响，因为低性能硬件（如移动设备或平板电脑）可能无法及时为下一个刻度重新绘制，从而导致帧速率降低*

浏览器兼容性

创建jQuery之类的库是为了填补旧浏览器之间的空白。它们使开发人员能够专注于开发，并减少处理浏览器不一致问题的时间。自从CSS、web标准和浏览器的compl