Why is it that when using JQuery, when I hover, there's no smooth animation?

Question

I have the following in my script.js file:

$(document).ready(function(){

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

});

There is a change in color (based on the instructions I'm giving in the stylesheet), but there's no animation (or transition). It just passes binarily to the other color, there's no animation where it passes through all the colors in the middle in a short-lapse of time.

Why is this?

EDIT: Just tried fadeIn() and fadeOut() and they are working properly, they have a smooth animation. Why are addClass() and removeClass() not working properly?

Without seeing the style definitions, it's impossible to say. This code alone won't do what you want. — Evan Davis, Mar 07 '15 at 04:42
`addClass` doesn't animate! If you have the "animation" in your CSS, you should post the relevant styles. — Ram, Mar 07 '15 at 04:42
possible duplicate of [CSS3 transition of background-color](http://stackoverflow.com/questions/4411306/css3-transition-of-background-color) — Evan Davis, Mar 07 '15 at 04:42
@Vohuman it does if there is a CSS `transition` defined on properties changed by the class. — Evan Davis, Mar 07 '15 at 04:43
You'd have to show us the relevant CSS. What do you have a transition set for? — jfriend00, Mar 07 '15 at 04:45

mohamedrias · Accepted Answer · 2015-03-07T05:03:18.610

addClass and removeClass api of Jquery doesn't provide any animation. They are just meant for adding or removing class.

If you want to achieve animation, then you must add transition in the class you are adding.

There's no need for jQuery also. Just use :hover pseudo selector to achieve it

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

DEMO

score 1 · Answer 2 · answered Mar 07 '15 at 05:09

You can try j Query Animate.

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

You can set css style as mentioned above so that you can get smooth animation.

eg program: Fiddle Url

Why is it that when using JQuery, when I hover, there's no smooth animation?

2 Answers2