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

You can't use jQuery's .animate() in conjunction with CSS transforms, at least without a plugin, since the scale() part is non-numeric and would confuse it.

However, you don't actually need jQuery at all for the effect you're after. You can combine -webkit-transform with -webkit-transition (and -moz and -o equivalents) to animate transforms directly in CSS. For example:

#why-red a {
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    -o-transition: all .15s linear;
}

#why-red a:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}

(See: http://www.the-art-of-web.com/css/css-animation/)

If you'd like you may be able to the apply the CSS via jQuery's .css() on hover, but this is not needed. Or if you would like to apply css transitions using jquery:

$('#why-red a').css({
    '-webkit-transform': 'scale(1.1)',
    '-moz-transform': 'scale(1.1)',
    '-o-transform': 'scale(1.1)'
});

Answer 2

Another option to those mentioned above is Transit JS.

Using transit js you can call...

$('.className').transition({ scale: 1.0, duration: 400 });

Transit JS: http://ricostacruz.com/jquery.transit/

Answer 3

see the Demos of Jquery having great source.

http://jqueryui.com/demos/toggleClass/

Color Animation Class Animation Show Hide

Just on the fly..

Answer 4

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="why-red">
<a href="#">why-red a</a>
</div>

Answer 5

If you wish .animate() used transitions automatically when available (and fallback to regular animation otherwise), you should check out "Enhancing jQuery’s animate function to automatically use CSS3 transitions".

Github repository of the plugin.