Question

我正在使用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？

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

ie9上这个css3动画的jQuery回退

1 个答案: