我们如何在jquery中添加css +动画？

Question

这是我正在尝试做的一小部分:

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

这可以用CSS完成:

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

它的工作原理.然而,在WebKit中,在悬停时,它会变得更慢,不像Firefox或IE中的图像会立即变大.

如果我们能有这样的东西会更好:

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

我们如何添加转换效果或扩展不仅适用于Webkit,还适用于IE,Firefox等.

更新:我收到了一个关于如何从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);
});

目前,这是一个很好的解决方案,但你们中的任何人都有更好的想法吗？

Answer 1

你不能将 jQuery.animate()与 CSS 转换结合使用，至少在没有插件的情况下是这样，因为该scale()部分是非数字的并且会混淆它。

然而，您实际上根本不需要 jQuery 来实现您想要的效果。您可以结合-webkit-transform使用-webkit-transition（和-moz以及-o等效项）直接在 CSS 中对变换进行动画处理。例如：

#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 过渡：

$('#why-red a').css({
    '-webkit-transform': 'scale(1.1)',
    '-moz-transform': 'scale(1.1)',
    '-o-transform': 'scale(1.1)'
});