Question

我需要一些帮助。

我为我网站上的其中一个元素制作了一个漂亮的网络工具包动画。它应该连续旋转7度。不幸的是，它仅适用于Chrome。这是代码：

#brk {
background: url("../images/brk.png");
width: 118px;
height: 54px;
display: block;
position: relative;
top: 65px;
left: 93px;
     -webkit-animation: brk-spin 3s infinite linear;
     -moz-animation: brk-spin 3s infinite linear;
     -o-animation: brk-spin 3s infinite linear;
     -ms-animation: brk-spin 3s infinite linear;
}


@-webkit-keyframes brk-spin {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-7deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(7deg);}
100% { -webkit-transform: rotate(0deg);}
}

@-moz-keyframes brk-spin {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-7deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(7deg);}
100% { -webkit-transform: rotate(0deg);}
}

@-o-keyframes brk-spin {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-7deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(7deg);}
100% { -webkit-transform: rotate(0deg);}
}

@-ms-keyframes brk-spin {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-7deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(7deg);}
100% { -webkit-transform: rotate(0deg);}
}

所以我认为我对不支持webkit动画的浏览器使用了一些jQuery。我尝试了很多变化，但没有任何效果。

我下载了jQuery旋转插件（https://code.google.com/p/jqueryrotate/）

我试过这样的事情：

<script>
if(!Modernizr.cssanimation) { 
    $(function() {

    $('#brk').stop().rotate({ angle:0, animateTo: 7, duration:600, callback: 

function() {
        $('#brk').stop().rotate({ animateTo: -7, duration:600});
        }
    });

(function roty() {
     setTimeout(function() { roty() },1200);
             })();
       });
}
</script>

但是这个图像（背景为div）只来回摆动一次然后停止。

知道如何让它循环吗？

非常感谢帮助。谢谢！

Answer 1

为什么不让方法自己调用？那么动画为7的那个调用另一个，反之亦然。像这样：

function rotateSeven() {
    $('#brk').stop().rotate({ angle:0, animateTo: 7, duration:600, callback: function() {
        rotateNegative();
        }
    });
}

function rotateNegative() {
    $('#brk').stop().rotate({ angle:0, animateTo: -7, duration:600, callback: function()  {
        rotateSeven();
        }
    });
}

然后当你打电话给其中一个时，他们会继续互相打电话。我不确定这是不是最好的方法，因为我没有尝试以你在这里的方式制作动画。

修改

您的代码中是否有错误？我做了一些更简单的事情，但它对我有用，不断：

function fadeIn() { jQuery("#test").fadeIn(); fadeOut(); } function fadeOut() { jQuery("#test").fadeOut(); fadeIn(); } fadeOut();

这是一个简单的例子，但它适用于我的Js Fiddle

编辑2

以下是一个工作示例...为了确保，文档说使用IMG标记 - 您的#brk是IMG标记，对吧？否则，请尝试在this fiddle
上查看与我的不同之处

jQuery连续来回旋转动画

1 个答案: