jQuery連續來回旋轉動畫

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

所以我想我使用一些jQuery的瀏覽器，不支持webkit動畫。 我嘗試了很多變化，但沒有奏效。

我下載了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