0

私がこれまでに行ったことを見てください (ここの善良な人々の助けを借りて!)

http://www.justthisdesign.co.uk/

3 つのバナー画像がフェードインし、左の列に 2 つ、最後に右の列に 1 つが続きます。

ただし、クライアントは、最初に「Projects」という単語がフェードインし、次に左の列に各画像、次に「and」、「Properties」、右の列に画像が続くことを望んでいます。

3 つの div のそれぞれで .delay() の値を変更することで、ほぼ正しい順序にすることができますが、ペーシングを正しくすることは不可能です。

制御を強化するために、まったく別の手法を使用する必要がありますか? 明らかに、クライアントは、この「単純なリクエスト」にどれだけの作業が必要かを知りません!

4

4 に答える 4

1

ドキュメントのロード後にフェードインをトリガーすることをお勧めします..また、最初のアニメーションが終了した後に次のアニメーションをトリガーします

例

$(document).ready(function(){
     $('#project_banner').fadeIn('slow', function(){
        //This is called after fade in 
        $('#project_and_banner').fadeIn('slow',function(){
           // And so on
        });   
     });
});
于 2012-09-17T13:35:22.083 に答える
1

バナーを保持するタグを含む各要素に id を与え、次に、fadeTo のコールバック関数を使用して、前の要素が終了した後に一度に各要素を呼び出します。

$('#banner1').fadeTo(1000,1,function(){
  $('#banner2').fadeTo(1000,1,function(){
    $('#banner3').fadeTo(1000,1,function(){
    });
  });
});

http://api.jquery.com/fadeTo/によると、構文は次のとおりです。

.fadeTo( duration, opacity [, callback] )
于 2012-09-17T13:34:26.830 に答える
0

このデモを試す

デモコード

これはそのための単純なjQueryです

var mySequence=["one","two","three","four","five","six"];
$.each(mySequence,function(i){
  $("." + mySequence[i]).delay(1000*i).fadeTo(1000,1);
});
于 2012-09-17T13:53:44.707 に答える
0

コールバックを指定できます。このコールバック関数は、関数が作業を終了したときに呼び出されます

  $('#one').fadeIn('slow', function() {
     $('#two').fadeIn('slow',function(){
             $('#three').fadeIn();
       });
  });

ここで最初に #1、次に #2、次に #3 でフェードインします

于 2012-09-17T13:34:54.147 に答える