我的 script.js 文件中有以下内容:
$(document).ready(function(){
$( '.elementoBarra1').hover(
function(){
$(this).addClass('lineaBarraActive');
},
function(){
$(this).removeClass('lineaBarraActive');
}
);
});
颜色发生了变化(根据我在样式表中给出的说明),但没有动画(或过渡)。它只是二进制地传递到另一种颜色,没有动画在很短的时间内穿过中间的所有颜色。
这是为什么?
编辑:刚刚尝试了 fadeIn() 和 fadeOut() 并且它们工作正常,它们有流畅的动画。为什么 addClass() 和 removeClass() 不能正常工作?
最佳答案
Jquery 的
addClass
和removeClass
api 不提供任何动画。它们仅用于添加或删除类。
如果你想实现动画,那么你必须在你添加的类中添加transition
。
也不需要 jQuery。只需使用:hover
伪选择器即可实现
.elementoBarra1 {
background-color: black;
width: 100px;
height: 200px;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1000ms linear;
}
.elementoBarra1:hover {
background-color: red;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1000ms linear;
}
关于javascript - 为什么在使用 JQuery 时,当我悬停时,没有流畅的动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28911430/