javascript - 循环浏览一组带有动画的图像

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

        });