同じ方向に2つのdivをアニメ化する

Question

私はこれを検索しましたが、与えられた最善の答えは「あなたのアイテムの周りにdivを折り返してアニメーション/スクロールを追加する」ことです。私は同意する、それは私の問題の迅速な簡単な解決策になるだろうが、残念なことに、私は私divの別々のそれぞれのアニメーションを必要とする特定の問題があるので、私のdivの周りにdivをラップすることはできません。私は詳しく説明します...

私は、ハイライトと呼ばれるdivを持っています。このdivには、2つの行にいくつかのタイルがあり、各行に5つのタイルがあり、グリッドを形成しています。これは私が「リボン」と呼んでいるものです。私のページの一番下のパネルです。指定された幅のハイライトタイルの周囲にコンテナdivがあり、オーバーフローが隠されています。私のページャーの '前'または '次へ'ボタンを使用してください。私のコードは次のようになります：

<div class="ribbon-display"> 
     <div class="display-container clearfix"> 
     <div id="highlight"> 
     <div class="top-row clearfix">          
     <div class="ribbon-tile"></div> 
     <div class="ribbon-tile"></div> 
      <div class="ribbon-tile"></div> 
     <div class="ribbon-tile"></div> 
      <div class="ribbon-tile"></div> 
     </div> 
     <div class="ribbon-tile"></div> 
     <div class="ribbon-tile"></div> 
      <div class="ribbon-tile"></div> 
     <div class="ribbon-tile"></div> 
      <div class="ribbon-tile"></div> 
     </div> 
     <div id="highlight" class="new-highlight"> 
     <div class="top-row clearfix">          
     <div class="ribbon-tile"></div> 
     <div class="ribbon-tile"></div> 
      <div class="ribbon-tile"></div> 
     <div class="ribbon-tile"></div> 
      <div class="ribbon-tile"></div> 
     </div> 
     <div class="ribbon-tile"></div> 
     <div class="ribbon-tile"></div> 
      <div class="ribbon-tile"></div> 
     <div class="ribbon-tile"></div> 
      <div class="ribbon-tile"></div> 
     </div> 
     </div>    
    </div> 

私は何度も10タイルをロードしています。次に、「次へ」ボタンをクリックすると、次の10タイルを引き出すためのajax呼び出しが行われます。これらは、新しい 'ハイライト' divとしてコンテナdiv内のコンテンツに追加されます。したがって、私は今、お互いに隣接する10のタイルを含む2つの 'ハイライト' divを持っています。次に、jquery 'animate'関数を使用してこれらの両方を左にスクロールして、要素の '左'の位置を変更します。しかし、これを行うと、最初のハイライトパネルは隣のハイライトパネルよりも左に早くスライドします。スライドの中に隙間があることを意味します。すべてのスライドのコンテンツタイルがプリロードされ、スライドで表示/非表示になっている場合、どのようにすればよいですか。

私の質問は、どのようにしてこれらの2つのdivを同時に左にスライドさせることができますか、同じスピードで他のものの直後のもの？私が述べたように、私は....

$('#highlight').animate(
    {left:'-=971'}, 
    30000 
); 
$('.new-highlight').animate(
    {left:'-=971'}, 
    200 
); 

ように、アニメーション機能を使用して、左の位置を変えること探求し、またアニメーション機能にleftScroll用のparamaterを変更し、各ハイライトDIVの速度を変化させる試みました最初のアニメーションを遅くしてゆっくりと見せてアニメを偽装しようとする。誰でもこれをしようとした経験がありましたか？ 'scrollLeft'関数を使用できますか？

ここで大変助かりましたでしょうか。事前にみんなありがとう！

クレイグ

Answer 1

あなたが最初に終了と呼ばれるアニメイト方法に「終了」関数を渡すことができます。

$('#highlight').animate({left:'-=971'},30000, function(){ 
    $('.new-highlight').animate(
    {left:'-=971'}, 
    200 
); 
}); 

Answer 2

遅延機能を使用してデイジーチェーン接続することができます。

$('#highlight').animate({left:'-=971'},30000); 
$('.new-highlight').delay(30000).animate({left:'-=971'},200); 

ミリ秒であることに注意してください...アニメーションを30秒間実行しています。 :)

「これらの2つのdivを同時に左にスライドさせるにはどうすればよいのですか？

同時にまたは後で？私はあなたのアニメーションの意図が不明だとして、これらの2つの異なるもの:)

です。ここフィドルだ:) http://jsfiddle.net/NZkf8/

Answer 3

私はあなたが探している正確に何を理解するに苦労しています...しかし、このような

O_O ..あなたが最初のdivの位置にアニメーション化するために第2のdivの原因となる間隔を設定することで、「次」のこの効果を達成することができることをその可能性：

var follow = setInterval(function(){ 
    $('.new-highlight').animate(
    {left : $('#highlight').position().left}, 
    1000 
); 
},1000) 

$('#highlight').animate(
    {left:'-=971'}, 
    30000, 
    function(){ 
    window.clearInterval(follow) 
    } 
); 

あなたがかもしれません両方の1000で遊んでみてください。あなたが2番目の500を作るなら、毎秒、2番目のものは移動する2つの間の距離の半分を移動します。

私の戦術は非常に異なっているので、私は、この独自の答えを作って、私の 前の投稿はまだこのトピックについてのヘルプ を探している人々のために有効である可能性があります。