5

これは簡単な質問です。ボタンを押すと、1つの画像をフェードアウトして新しい画像をフェードインしたいと思います。この関数にバインドされたボタンがあります:

function changeBackground() {
var background = document.getElementById("background");
var h_background = document.getElementById("background_hidden")

$('#background').fadeOut('slow', function() {$('#background_hidden').fadeIn('slow')});
}

CSSでは、h_backgroundに次の表示があります。属性。この機能をそのまま使用すると、現在の画像がフェードアウトし、もう一方の画像は表示されますが、フェードインしません。突然表示されます。

私が間違っているかもしれないことについて何か考えはありますか?

jsfiddleを追加しましたが、現在は機能しません-理由を理解しようとしています。 http://jsfiddle.net/qrCjA/8/

4

2 に答える 2

2

私はあなたのフィドルをフォークし、コードを少しクリーンアップしました:http: //jsfiddle.net/4FzqA/

クリーンアップしたバージョンとオリジナルのバージョンを比較した後、唯一の違いは、フィドルが「onLoad」に設定されているときに、私のフィドルが「onDomReady」に設定されていることです。

それ以外の場合、コードは機能しているはずです。

window.onload = function() {
    var button = $("#fade_out").click(changeBackground);
}

function changeBackground() {
    $('#background').fadeOut('slow', function() {
        $('#background_hidden').fadeIn('slow');
    });
}

編集:元のフィドルが機能しなかったため、window.onloadが元のフィドルのonLoadと競合していたようです。window.loadをドキュメント対応に変更したとき、すべてが順調だったので、次のようになります。

$(document).ready(function() {
    var button = $("#fade_out").click(changeBackground);
});

別の編集:画像が大きい場合は、画像が読み込まれるのを待つことができますが、キャッシュから取得した場合、読み込みはトリガーされないことに注意してください。

$(document).ready(function(){
   var img = new Image();
   $(img)
      .hide()
      .load(function(){
         $("body").append(this);
         $(this).fadeIn(3000);
      })
      .attr("src", "files/originals/01.jpg");
});

取得元:Chromeでの大きな画像のフェードイン

別の編集:それの音から、それが画像サイズの問題であると推測するのは正しいかもしれません。元のフィドル(http://jsfiddle.net/4FzqA/7/)を新しい画像と負荷で更新しました。画像は毎回読み込まれることに注意してください。これはあまり効率的ではありません。しかし、それはあなたにアイデアを与えるでしょう。以下はJSです。

$(document).ready(function() {
    var button = $("#fade_out").click(changeBackground);
});

function changeBackground() {
    $('#background').fadeOut('slow', function () {
        $('#background_hidden')
            .attr('src', 'http://img688.imageshack.us/img688/8633/daynightm.jpg?' + (new Date()).getTime())
            .load(function () { 
                $(this).fadeIn('slow'); 
            });  
    });
}
于 2012-11-10T21:57:29.593 に答える
0

これを試して:

$("#fade_out").click(function(){
    changeBackground();
});

function changeBackground() {
    var background = document.getElementById("background");
    var h_background = document.getElementById("background_hidden")

    $('#background').fadeOut('slow', function() {
        $('#background_hidden').fadeIn('slow');
    });
}
​

このJSフィドルで動作します:http://jsfiddle.net/4FzqA/1/

于 2012-11-10T22:03:39.260 に答える