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

Answer 2

如果您希望.animate()在可用时自动使用过渡（否则会回退到常规动画），您应该查看＆＃34; Enhancing jQuery’s animate function to automatically use CSS3 transitions＆＃34;。

Github repository插件。

Answer 3

看到Jquery的演示有很好的资源。

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

彩色动画类动画显示隐藏

即时飞行..

Answer 4

上面提到的另一个选择是Transit JS。

使用中转js你可以打电话......

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

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

Answer 5

我知道这个问题是在几年前提出的，但是我已经找到了解决类似问题的方法，所以我决定分享一下。我已经使用@-webkit-keyframes来创建2个动画。一个带有.mouseover，另一个带有.mouseout。结合.addClass和.removeClass，我设法完成了这项工作。

请参见jsFiddle

中的示例

或以下代码段：

$('#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>

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

5 个答案: