Javascript 为什么在使用JQuery时，当我悬停时，会出现'；没有平滑的动画？

我的script.js文件中包含以下内容：

$(document).ready(function(){

  $( '.elementoBarra1').hover(
    function(){
        $(this).addClass('lineaBarraActive');
    },
    function(){
        $(this).removeClass('lineaBarraActive');
    }
  );

});

颜色有变化（根据我在样式表中给出的说明），但没有动画（或过渡）。它只是通过另一种颜色，没有动画，它在短时间内通过中间的所有颜色。< /P> 为什么会这样

---

编辑：刚刚尝试了fadeIn（）和fadeOut（），它们工作正常，动画平滑。为什么addClass（）和removeClass（）不能正常工作？

addClass

和

removeClass

Jquery的api没有提供任何动画。它们只是用于添加或删除类

如果要实现动画，则必须在要添加的类中添加

transition

也不需要jQuery。只需使用

：悬停

伪选择器即可实现

.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;
}

您可以试试

您可以如上所述设置css样式，以便获得平滑动画

---

例如：程序：

你能在

jsfiddle

中发布你的代码吗？创建jsfiddle的网站是jsfiddle.net。

addClass

没有动画！如果你的CSS中有“动画”，你应该发布相关的样式。你的CSS动画代码是什么样子的？@Vohuman如果在类更改的属性上定义了CSS

transition

，就会这样做。

$( "selector" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );