Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do we add css + animation in jquery?

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?

like image 212
Adam Ramadhan Avatar asked Feb 17 '11 12:02

Adam Ramadhan


People also ask

Which jQuery function is used to add animation to an element?

The . animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties.

How do you animate CSS?

To make a CSS animation, you need three things: an HTML element to animate, a CSS rule which binds the animation to this element, and a group of keyframes that defines the styles at the start and end of the animation. You can also add declarations to further customize your animation, like speed and delay.

Can we do animation using only CSS without JavaScript or jQuery?

CSS allows animation of HTML elements without using JavaScript or Flash!

Can you do animations with CSS?

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

How can add Flash animation button in jQuery?

The solution to Jquery To Animate A Flash To The Button Selected will be demonstrated using examples in this article. $("#someElement"). fadeOut(100). fadeIn(100).


3 Answers

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)'
});
like image 157
David Tang Avatar answered Oct 07 '22 11:10

David Tang


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.

like image 33
wildpeaks Avatar answered Oct 07 '22 13:10

wildpeaks


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>
like image 39
kifka Avatar answered Oct 07 '22 12:10

kifka