3

以下のコードは、一連の画像をアニメーション化して実行し、無期限に繰り返す必要があります。現在、ページに読み込まれ、終了します。アニメーションを表示するためのURLは次のとおりです。http：//marisspillanewines.com/dev/

ありがとう！モナ

$(document).ready(function (){
  $("#cork_CU").animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true });
  $("#fisherman_CU").delay(4800).animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true });
  $("#maris_CU").delay(8800).animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true });
  $("#capsule_CU").delay(12800).animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true });
  $("#numbers_CU").delay(16800).animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true });
  $("#fisherman_CU").delay(4800).animate({left: '-700px',top:'600px'}, { duration: 0, queue: true, ease:true });
  $("#maris_CU").delay(4800).animate({left: '-700px',top:'-600px'}, { duration: 0, queue: true, ease:true });
  $("#cork_CU").delay(4800).animate({left: '700px',top:'600px'}, { duration: 0, queue: true, ease:true });
  $("#capsule_CU").delay(4800).animate({left: '700px',top:'-600px'}, { duration: 0, queue: true, ease:true });
  $("#numbers_CU").delay(4800).animate({left: '700px',top:'-600px'}, { duration: 0, queue: true, ease:true });
});
4

1 に答える 1

0

jQuery でのこのようなタイミングの問題には、プラグイン jQuery-timingがあります。コードを次のように短縮します。画像に共通の CSS クラス、たとえば「pic」を指定することをお勧めします。

var startLeft = $('.pic').each().css('left'),
    startTop = $('.pic').each().css('top'),
    targetPos = {left:-20,top:-20};

var $frame = $('.pic').parent();

function setBack(index) {
    this.css({left:startLeft[index], top:startTop[index]}).appendTo($frame);
}

$(".pic").repeat().each($).then(setBack).animate(targetPos,600).wait(4000);

このソリューションは、フレーム内の実際の画像数に依存しないため、非常に一般的です。

.appendTo($frame) を使用することで、アニメーション画像が常に一番上に表示されるようにします。

.repeat()は、その拡張からのタイミング メソッドであり、.each($)によるシーケンシャル ループと遅延関数.wait(timeout)です。

開始位置を収集するために、短い構文と parallel .each()を使用しました。

于 2012-10-04T07:16:48.967 に答える