0

我需要一些帮助。

我为我网站上的一个元素制作了一个不错的 web kit 动画。它应该连续来回旋转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）只来回摆动一次，然后就停止了。

知道如何让它循环吗？

帮助将不胜感激。谢谢！

4

1 回答 1

2

为什么不让方法自己调用呢？所以让动画到 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标签，对吗？否则，试着看看你的和我的有什么不同

于 2013-04-22T15:34:14.750 回答