How to add css + animation in jquery?

Question

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

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

This can be done using CSS:

 // image #effect a:hover{ text-decoration:none; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); z-index: 4; } 

and it works. However, in WebKit, when it freezes, it becomes slower, unlike Firefox, or IE, where images grow instantly.

It would be better if we had something like:

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

How to add transition effects or scale not only for Webkit, but also for IE, Firefox, etc.

Update : I got a great example of how to do something similar from the good guy in jQuery IRQ.

 var rmatrix = /matrix\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\)/; jQuery.support.scaleTransformProp = (function() { var div = document.createElement('div'); return div.style.MozTransform === '' ? 'MozTransform' : div.style.WebkitTransform === '' ? 'WebkitTransform' : div.style.OTransform === '' ? 'OTransform' : div.style.MsTransform === '' ? 'MsTransform' : false; })(); if (jQuery.support.scaleTransformProp) { jQuery.cssHooks['scale'] = { get: function(elem, computed, extra) { var transform = jQuery.curCSS(elem, jQuery.support.scaleTransformProp), m = transform.match(rmatrix); return m && parseFloat(m[1]) || 1.0; }, set: function(elem, val) { var transform = jQuery.curCSS(elem, jQuery.support.scaleTransformProp); if (transform.match(rmatrix)) { elem.style[jQuery.support.scaleTransformProp]= transform.replace(rmatrix, function(m, $1, $2, $3, $4, $5, $6) { return 'matrix(' + [val, $2, $3, val, $5, $6].join(',') + ')'; }); } else { elem.style[jQuery.support.scaleTransformProp]= 'scale(' + val + ')'; } } }; jQuery.fx.step.scale = function(fx) { jQuery.cssHooks['scale'].set(fx.elem, fx.now) }; } /*SEMENTARA*/ $('#why-red a').hover(function() { $(this).animate({ 'scale' : 1.1 }, 200); }, function() { $(this).animate({ 'scale': 1 }, 200); }); 

This is a good solution at the moment, but do any of you have any better ideas?

Answer 1

You cannot use jQuery .animate() in combination with CSS transformations, at least without a plugin, since the scale() part is not numeric and will confuse it.

However, you really don't need jQuery for the effect you are using. You can combine -webkit-transform with the equivalents of -webkit-transition (and -moz and -o ) to animate conversions 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 want you to be able to apply CSS through jQuery .css() on hover, but this is not necessary. Or if you want 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

If you want .animate() use transitions automatically when they are available (and otherwise dropped to normal animation), you should check " Improve jQuerys animation function to automatically use CSS3 transitions ".

Github plugin repository .

Answer 3

see jQuery demos having a great source.

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

Color Animation Class Animation Show Hide

Just on the fly.

Answer 4

Another option mentioned above is Transit JS.

Using js junction you can call ...

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

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