通過一組圖像循環播放動畫

Question

我一直在研究這個問題幾個小時，我不確定還有什麼其他的方法。我有5個圖像，我想在屏幕上旋轉。如果您向下單擊文字，圖像將移動到正確的位置。但是，如果我再次單擊它，圖像將隨機指向。我的問題是，我的代碼有什麼問題。或者更好的是，我這樣做是錯的嗎？有沒有一種更簡單的方法來做到這一點，我看不到。我創建了一個工作的jsfiddle例如http://jsfiddle.net/2uPJP/13/

相關的js代碼......

function convert() { 

    var $hide1 = $(".hide1"); 

    var $hide2 = $(".hide2"); 

    var $hide3 = $(".hide3"); 

    var $hide4 = $(".hide4"); 

    var $hide5 = $(".hide5"); 

    $hide1.removeClass().addClass("hide2"); 

    $hide2.removeClass().addClass("hide3"); 

    $hide3.removeClass().addClass("hide4"); 

    $hide4.removeClass().addClass("hide5"); 

    $hide5.removeClass().addClass("hide1"); 

} 

$(document).ready(function() { 

    $('.hide1').animate({ 
    top: '+=100', 
    right: '+=100' 
    }, 1500); 

    $('.hide5').animate({ 
    bottom: '+=100', 
    right: '+=100' 
    }, 1500); 


$('.down').click(function() { 

    $('.hide1').animate({ 
    left: '+=100' 
    }, 1500); 

    $('.hide2').animate({ 
    top: '+=100' 
    }, 1500); 

    $('.hide3').animate({ 
    top: '+=100' 
    }, 1500); 

    $('.hide4').animate({ 
    right: '+=100' 
    }, 1500); 

    $('.hide5').animate({ 
    bottom: '+=200' 
    }, 1500); 

    setTimeout(convert, 1501); 

}); 
}); 

Answer 1

請參閱本http://jsfiddle.net/2uPJP/16/，約需動畫隊列護理。您將動畫的錯誤項動畫隊列中1500

function convert() { 
      var $hide1 = $(".hide1"); 

      var $hide2 = $(".hide2"); 

      var $hide3 = $(".hide3"); 

      var $hide4 = $(".hide4"); 

      var $hide5 = $(".hide5"); 

      $hide1.removeClass("hide1").addClass("hide2"); 

      $hide2.removeClass("hide2").addClass("hide3"); 

      $hide3.removeClass("hide3").addClass("hide4"); 

      $hide4.removeClass("hide4").addClass("hide5"); 

      $hide5.removeClass("hide5").addClass("hide1"); 

     } 
     $(document).ready(function() { 

      $('.hide1').animate({ 
       top: '+=100', 
       left: '-=100' 
      }, 1500); 

      $('.hide5').animate({ 
       top: '-=100', 
       left: '-=100' 
      }, 1500); 


      $('.down').click(function() { 
       convert() 
       $('.hide2').animate({ 
        left: '+=100' 
       }, 1500); 

       $('.hide3').animate({ 
        top: '+=100' 
       }, 1500); 

       $('.hide4').animate({ 
        top: '+=100' 
       }, 1500); 

       $('.hide5').animate({ 
        left: '-=100' 
       }, 1500); 

       $('.hide1').animate({ 
        top: '-=200' 
       }, 1500); 
      }); 

     }); 

Answer 2

單擊兩次的時候我會通過設置基於相同的參考，如top和right所有位置接近這個在一個非常不同的方式。然後，我將旋轉包含位置的數組以生成動畫，並選擇速度和延遲等選項，並使用單個動畫功能移動每個圖像。

var positions = [ /*[ top,right]*/ 
    [100, 100], [100, 0], [200, 0], [300, 0], [300, 100] 
]; 

var animOpts=[/* delay, speed*/ 
    [300,1500],[0,1500],[0,1500],[300,1500],[0,2000] 
    ] 


var $fish; 

$(document).ready(function() { 

    $fish = $('.span2 img'); 
    /* move 1st and 5th on page load */ 
    fishAnim(0); 
    fishAnim(4); 

    $('.down').click(function() { 
     rotateAllfish(); 
    }); 

}); 

function shuffleArray(arr){ 
    /* move element in first position to end of array */ 
    arr.push(arr.shift()); 
} 

function rotateAllfish() {  
    shuffleArray(positions); 

    $fish.each(function(fishIndex) { 
     fishAnim(fishIndex, true) 
    }); 

    shuffleArray(animOpts); 

} 

function fishAnim(fishIndex, addDelay) { 
    var delay= addDelay ? animOpts[fishIndex][0] : 0; 
    $fish.eq(fishIndex).delay(delay).animate({ 
     top: positions[fishIndex][0], 
     right: positions[fishIndex][1] 
    }, animOpts[fishIndex][1]); 
} 

DEMO：http://jsfiddle.net/2uPJP/19/

演示只是