我们如何在jQuery中添加CSS +动画？ [英] 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');
});

这可以用CSS来实现：

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

和它的作品。然而，在WebKit的，悬停时，它就会慢慢做大，不像在Firefox或IE那里的图像瞬间长出大。

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

我们怎样才能添加转场效果或扩展不只是为Webkit的，但对于IE，火狐等。

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

更新：
我接受了如何从jQuery的IRC一个好人做这样的事情有很大的样品。

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?

推荐答案

您不能使用jQuery的 .animate（）与CSS转换，至少不用连词插件，因为规模（）部分为非数字，并会混淆。

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.

不过，你实际上并不需要的jQuery在所有的你后的效果。您可以将 -webkit-变换与 -webkit-过渡（和 -moz 和 -o 当量）直接在CSS动画转换。例如：

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

（请参阅： HTTP：//www.the-art- of-web.com/css/css-animation/ ）

如果您希望您可以给应用通过jQuery的的.css（）悬停的CSS，但是这是没有必要的。或者，如果你想使用jQuery应用CSS转换：

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

这篇关于我们如何在jQuery中添加CSS +动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！