2

私は現在、小さな jquery スクリプトを使用して、友人のポートフォリオ サイト用に作成しているポートフォリオ サイトの背景画像を回転させています。コードは次のとおりです。

  counter = 1; 
    num_images = 9;
    dir = "IMAGE DIRECTORY URL";

    function rotateHeader() {


 var background_img = 'url(' + dir + '/image' + counter + '.gif)';

 jQuery('.category').css('background-image', background_img);  
 counter++; if (counter > num_images) counter = 1;

    }
    setInterval( "rotateHeader()", 5000 );

ここで動作することがわかります：

www.iamanatom.com/site/the-good

私がやりたいのは、画像や色をフェードインまたはフェードアウトさせることです。これを行うには、画像をプリロードしてから、画像のロード時にある種のフェード プロパティを追加する必要があると思います。どうすればいいですか？

4

1 に答える 1

1

このようなものはそれを行うべきです

var counter = 1, 
    num_images = 9,
    dir = "IMAGE DIRECTORY URL";

function rotateHeader() {

    var background_img = 'url(' + dir + '/image' + counter + '.gif)';

    jQuery('.category').fadeOut(function() {
        jQuery(this).css('background-image', background_img).fadeIn();
    });  
    counter++; if (counter > num_images) counter = 1;
}
setInterval(rotateHeader, 5000 );

最初に現在の背景画像をフェード アウトし、次にコールバック関数で背景画像を変更してからフェード インに戻します。必要な効果を得るために、fadeOut()とのfadeIn()間隔で遊んでみるとよいでしょう。setInterval()また、評価する文字列ではなく、関数名を使用するように変更しました。

于 2010-01-24T09:55:39.747 に答える