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