0

私はこれに数時間取り組んできましたが、他に何をすべきかよくわかりません。画面上で回転させたい画像が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);

});
});
4

2 に答える 2

1

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

デモ：http：//jsfiddle.net/2uPJP/19/

デモは手動モードのみです

于 2012-11-22T03:14:06.293 に答える
1

このhttp://jsfiddle.net/2uPJP/16/を参照してください、アニメーションキューに注意してください。1500以内に2回クリックすると、アニメーションが間違ったアイテムのアニメーションキューに添付されます

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

        });
于 2012-11-22T02:35:42.273 に答える