アニメーション化された親スライドがスクロールを使わずにビューポートに移動するときにネストされたコンテンツをアニメーション化する方法

Question

親スライドがビューポートに移動したときに、ネストされたDIVのコンテンツをアニメーション化するためにjavascriptを使用したいと考えています。

現在のところ、ネストされたDIVのコンテンツは、親スライドが画面に移動した後にスクロールコマンドがトリガーされたときにのみアニメーション化されます。これは、スライドの動きがアニメーション化され、スクロール制御されていないためです。

同じ問題は、私は問題を探求するために作成され、このJSFiddleデモで遊んでいる：

http://jsfiddle.net/9dz3ubL1/

（このデモでは、右から左へのスライドのアニメーションの動きをテストするために作成されていますこの問題は、スクロールせずにスライドの動きを再現するためのものであり、実際には適切な開発の特徴ではありません）。

私の質問は、各スクロール要素がスクロール機能を必要とせずにビューポートに移動するときに、ネストされたDIVごとにアニメーションをトリガーする方法は何ですか？

ありがとうございました。ここでは、不透明度やその他のCSSスタイルを制御するために使用しているスクリプトを示します。

$(document).ready(function() { 
 
    /* Every time the window is scrolled ... */ 
 
    $(window).scroll(function() { 
 
    /* Reveal hidden_header delayed */ 
 
    $('.hidden_header').each(function(i) { 
 
     var center_of_object = $(this).offset().left + $(this).outerWidth(); 
 
     var center_of_window = $(window).scrollLeft() + $(window).width(); 
 
     /* If the object is completely visible in the window, fade it it */ 
 
     if (center_of_window > center_of_object) { 
 
     $(this).animate({ 
 
      'opacity': '1' 
 
     }, 500); 
 
     $(this).animate({ 
 
      'right': '0' 
 
     }, 1500); 
 
     } 
 
    }); 
 
    /* Reveal hidden_content delayed */ 
 
    $('.hidden_content').each(function(i) { 
 
     var center_of_object = $(this).offset().left + $(this).outerWidth(); 
 
     var center_of_window = $(window).scrollLeft() + $(window).width(); 
 
     /* If the object is completely visible in the window, fade it it */ 
 
     if (center_of_window > center_of_object) { 
 
     $(this).animate({ 
 
      'opacity': '1' 
 
     }, 3000); 
 
     $(this).animate({ 
 
      'bottom': '0' 
 
     }, 3500); 
 
     } 
 
    }); 
 
    /* Reveal button delayed */ 
 
    $('.button').each(function(i) { 
 
     var center_of_object = $(this).offset().left + $(this).outerWidth(); 
 
     var center_of_window = $(window).scrollLeft() + $(window).width(); 
 
     /* If the object is completely visible in the window, fade it it */ 
 
     if (center_of_window > center_of_object) { 
 
     $(this).animate({ 
 
      'opacity': '1' 
 
     }, 5000); 
 
     } 
 
    }); 
 
    }); 
 
});

Answer 1

（それはあなたがリンクされjsfiddleであるようインクリメンタルない）あなたのスライドの動きが完全にアニメーション化されている場合、次にjQueryのは、あなたのアニメーションが完了した後のアクションを実行する機能を提供します。

http://api.jquery.com/animate/

を使用すると、アニメーション機能のために使用できるオプションを見てください。そのうちの1つは完了と呼ばれます。 doneオプションに関数を割り当てることができ、アニメーションが完了するとその関数が呼び出されます。

例として、あなたのアニメーション化のいずれかを使用して、構文は次のようになります。私はちょうどあなたのコードからランダムアニメーションを選んだ

$(this).animate({ 
       'opacity': '1' 
      }, {duration: 3000, done: function() { 
       //animate some stuff here 
    }}; 

注意を。コンテンツのアニメーションをいつ実行するかは正確にはわかりませんが、このテクニックはjQueryアニメーションを使用する場所であればどこでも使用できます。

私はスライドショー形式でネストされたアニメーションを制御するためにこれを使用しています。私はこれがあなたが望んだことを望みます。