3

あなたの助けが必要です！

基本的なアイデア:ユーザーが 1 つのポイント (ページの中央 - 上から 500 ピクセルだとしましょう) までスクロールすると、いくつかのアニメーションが表示されます。コールバックに関する基本的な考え方を教えてください

私が意味するコールバック：最初のアニメーションの後、2番目のアニメーション、次に3番目のアニメーションを取得します。これにどのようにアプローチしますか？

シナリオ:

  • 4 つのボックスがあり、赤、青、オレンジ、ピンクの色があるとします。
  • ユーザーが上から 500px までスクロールした後 - 最初の赤いボックスのフェードインが必要です
  • その 2 秒後に赤いボックスがフェードアウトし、青いボックスがフェードインします。
  • 私の最初のアイデアでは、それらを回転させるか、他のアニメーションを作成する必要があります-これも行うことができれば素晴らしいでしょう:)、私があまりにも多くを求めていると思われる場合は、この点を無視してください

ツール:

私はいつもすべての解決策に感謝しているので、適切な解決策に+1してください。それが機能する場合は投票します:)

ありがとう！

4

2 に答える 2

2

jQuery ウェイポイントを使用しています。

これは、問題の要素が完全に表示されたときにトリガーされます。つまり、要素の下部がビューポートの下部より上にあることを意味します。

$('.red_box').waypoint(function(direction){
  $('.red_box').fadeIn();
  window.setTimeout(animateBlue, 2000);
},{offset: 'bottom-in-view'});

アニメーションが開始され、アニメーション中にタイマーが開始され、指定された関数が 2 秒後に呼び出されます。

function animateBlue(){
  $('.red_box').fadeOut(function(){
    $('.blue_box').fadeIn();
  });
  window.setTimeout(animatePink, 2000);      
}

function animatePink(){
  $('.blue_box').fadeOut(function(){
    $('.pink_box').fadeIn();
  });
}

赤いボックスがフェードアウトし、アニメーションが完了すると青いボックスがフェードインします。

さらにアニメーションを行うには、さらにウェイポイントを使用するか、一定時間後に別の呼び出しを使用できます。フェード関数の API のヘルプについては、http://api.jquery.com/category/effects/fading/ を参照して
ください
(おそらくご存知でしょう)。

もちろん、タイミングとアニメーションの開始時期を微調整できます。
アニメーションが完了してから 2 秒を開始する必要があるかどうかはわかりませんでした。また、赤と青のフェードアウトとフェードインを同時に行うべきかどうかもわかりませんでした。

回転の場合:
http://javascriptisawesome.blogspot.de/2011/09/jquery-css-rotate-and-animate-rotation.html

于 2013-05-02T15:19:08.243 に答える
1

基本的に、やりたいことは次のとおりです。

$('#el1').fadeIn(500,function(){
    $('#el1').delay(2000).fadeOut(500,function(){
        $('#el2').fadeIn(500)
    })
})

1つのアニメーションが完了すると、別のアニメーションが呼び出されます!

于 2013-05-02T14:56:35.963 に答える