ie9 上这个 css3 动画的 jQuery 后备答案

【问题标题】：jQuery fallback for this css3 animation on ie9ie9 上这个 css3 动画的 jQuery 后备
【发布时间】：2014-04-20 02:41:55
【问题描述】：

我将 animate.css 用于 css3 动画，但 ie9 及更早版本不支持 css3 动画。

我在这个页面的所有按钮中都使用了脉冲动画：http://www.codetocode-developments.com/demos/battle/index.html

我一直在尝试做一个 jQuery 后备（使用modernizr）：

if(!Modernizr.cssanimations) {
    $('.btn').hover(
        function() {
            $(this).animate({
                padding:'15px 30px'
              }, 500)
        },
        function() {
            $(this).animate({
                padding:'10px 20px'
              }, 500)
        }
    );
}

我没有成功。有人知道 jQuery 怎么做这个效果宽度吗？

【问题讨论】：

您在寻找类似jquery.malsup.com/hoverpulse 的东西吗？
是的，但如果我能在没有插件的情况下做到这一点会更好。谢谢，如果我没有找到其他方法，我会使用它。
没有jquery缩放元素的方法吗？
如果要实现与页面相同的动画效果，必须同时为按钮的width、height、margin-left、margin-top属性设置动画，这样用户才会有成比例增加的效果按钮。

标签： javascript jquery css

【解决方案1】：

看看这个例子DEMO

版权归脚本作者所有。

HTML

<img src="http://healingaia.com/img/nb-petal-detox.png" />
<img src="http://healingaia.com/img/nb-petal-detox.png" />
<img src="http://healingaia.com/img/nb-petal-detox.png" />
<img src="http://healingaia.com/img/nb-petal-detox.png" />

CSS

body {overflow:hidden;}

img {
 display:block;
 margin:10px auto 0px;
 position:relative;    
}

jQuery

$(function() {
    $('img').hover(function() {
        $(this).stop().animate({
            width:'472px',
            height:'246px',
            marginTop:'-118px',
            bottom:'-59px',
        }, 1000, "easeOutBack");
    }, function() {
        $(this).stop().animate({
            width:'236px',
            height:'123px',
            marginTop:'0px',
            bottom:'0px'
        }, 700, "easeOutBounce");
    });
});

【讨论】：