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');  
    }, function() {
    $(this).animate({ -webkit-transform: 'scale(1)' }, 'slow');
});

This could be done with 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, on hover, it gets bigger slowly, unlike in Firefox, or IE where the images grow big instantly.

It would be nicer if we could have something like:

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

How can we add transition effects or to scale not just for Webkit, but for IE, Firefox, etc.

Update: I received a great sample on how to do something like this from a good guy in jQuery IRC.

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

For now, this is a good solution, but do any of you have even better ideas?

Trevor · Accepted Answer · 2013-09-26 23:01:50Z

4

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

edited Sep 26, 2013 at 23:01

Trevor

16.1k10 gold badges56 silver badges85 bronze badges

answered Feb 17, 2011 at 12:48

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adam Ramadhan Over a year ago

great, but it seems its far for ie :D.

David Tang Over a year ago

@Adam, yeah, there's no CSS option for IE. You can "gracefully degrade" though ;)

wildpeaks · Accepted Answer · 2011-02-17 13:03:42Z

2

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.

answered Feb 17, 2011 at 13:03

wildpeaks

7,4222 gold badges34 silver badges36 bronze badges

Comments

kifka · Accepted Answer · 2018-10-04 05:45:24Z

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

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

answered Oct 4, 2018 at 5:45

kifka

1061 gold badge2 silver badges9 bronze badges

1 Comment

Jordan Over a year ago

Thanks for this comment, this is exactly what I was looking for.

Bindas · Accepted Answer · 2011-02-17 12:57:35Z

0

see the Demos of Jquery having great source.

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

Color Animation Class Animation Show Hide

Just on the fly..

answered Feb 17, 2011 at 12:57

Bindas

9702 gold badges8 silver badges22 bronze badges

Comments

p4tch · Accepted Answer · 2014-03-01 16:24:57Z

0

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/

answered Mar 1, 2014 at 16:24

p4tch

811 silver badge5 bronze badges

Collectives™ on Stack Overflow

How do we add css + animation in jquery?

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related