为什么在使用JQuery时，当我将鼠标悬停时没有平滑的动画？

Question

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

$(document).ready(function(){

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

});

颜色发生了变化（根据我在样式表中给出的说明），但是没有动画（或过渡）。 它只是二进制地传递到另一种颜色，没有动画可以在短时间内通过中间的所有颜色。

为什么是这样？

编辑：刚刚尝试了fadeIn（）和fadeOut（），并且它们工作正常，它们具有平滑的动画。 为什么addClass（）和removeClass（）无法正常工作？

Answer 1

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

演示

Answer 2

您可以尝试j Query Animate 。

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

您可以如上所述设置css样式，以便获得流畅的动画。

例如程序： Fiddle Url