1

ここにあるファイルを使用して、いくつかの画像をフェードインおよびフェードアウトする一種のスプラッシュ画面を作成するために、少しのコードを使用しています: http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/

ただし、画像がフェードアウトするのを防ぐ方法を考えているので、画像がゆっくりと構築されてから、最終的にフェードアウトしてその下のWebサイトが表示されます...

私はこれに非常に慣れていないので、変更するコードを見つけようとすると、以下のコードを使用していることが問題になることが証明されています。

// 自己実行型の無名関数。 // jQuery プラグインを開発するための標準的な手法。

(関数($){

$.fn.splashScreen = function(settings){

    // Providing default options:

    settings = $.extend({
        textLayers      : [],
        textShowTime    : 3500,
        textTopOffset   : 80
    },settings);

    var promoIMG = this;

    // Creating the splashScreen div.
    // The rest of the styling is in splashscreen.css

    var splashScreen = $('<div>',{
        id  : 'splashScreen',
        css:{
            backgroundImage     : promoIMG.css('backgroundImage'),
            backgroundPosition  : 'center '+promoIMG.offset().top+'px',
            height              : $(document).height()
        }
    });

    $('body').append(splashScreen);

    splashScreen.click(function(){
        splashScreen.fadeOut('slow');
    });

    // Binding a custom event for changing the current visible text according 
    // to the contents of the textLayers array (passed as a parameter)

    splashScreen.bind('changeText',function(e,newID){

        // If the image that we want to show is
        // within the boundaries of the array:

        if(settings.textLayers[newID]){
            showText(newID);
        }
        else {
            splashScreen.click();
        }
    }); 

    splashScreen.trigger('changeText',0);

    // Extracting the functionality as a 
    // separate function for convenience.

    function showText(id){
        var text = $('<img>',{
            src:settings.textLayers[id],
            css: {
                marginTop : promoIMG.offset().top+settings.textTopOffset
            }
        }).hide();

        text.load(function(){
            text.fadeIn('slow').delay(settings.textShowTime).fadeOut('slow',function(){text.remove();
                splashScreen.trigger('changeText',[id+1]);
            });
        });

        splashScreen.append(text);
    }

    return this;
}

})(jQuery);

4

0 に答える 0