How do we add css + animation in jquery?

Question

Here is a little snippet of what I\'m trying to do:

$(\'#why-red a\').hover(function() {
    $(this).animate({ -webkit-transform: \'scale(1.1)\'  }, \'slow\');           


        

Answer 1

i know this question was asked years ago, but i have found a solution for a similar problem, so i have decided to share. i have used @-webkit-keyframes to create 2 animations. one with .mouseover and one with .mouseout. combining with .addClass and .removeClass I have managed to make this work.

see example in jsFiddle

or this snippet code:

$('#why-red a').mouseover(function() {
$(this).addClass("scaleAnimation")
.removeClass("downScaleAnimation")
.css("-webkit-transform","scale(1.1)");
})
$('#why-red a').mouseout(function() {
$(this).removeClass("scaleAnimation").
addClass("downScaleAnimation")
.css("-webkit-transform","scale(1)");
})

@-webkit-keyframes scaleAnim {
    0% {-webkit-transform: scale(1);}
    100% {-webkit-transform: scale(1.1);}

}
@-webkit-keyframes downScaleAnim {
    0% {-webkit-transform: scale(1.1);}
    100% {-webkit-transform: scale(1);}

}
.scaleAnimation{
    animation: scaleAnim 1s;
    animation-iteration-count: 1;
}
.downScaleAnimation{
      animation: downScaleAnim 1s;
    animation-iteration-count: 1;
}
#why-red a{position:absolute;}

why-red a