CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
user3235483
user3235483

Reputation: 105

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

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?

Upvotes: 0

Views: 97

Answers (2)

Vivek Aasaithambi
Vivek Aasaithambi

Reputation: 929

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

Upvotes: 1

mohamedrias
mohamedrias

Reputation: 18566

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

Upvotes: 1

Related Questions