2010-12-31 20 views
0

私はjavasriptとjQueryの新機能です。画像をフェードアウトしてランダムなものに置き換える簡単なスクリプトを作成しようとしています。jQuery fade + replace issue

退色する次の画像が「curImg」と呼ばれていない場合は、次のように動作します。 nextImg関数の生成に失敗した可能性がありますが、正確な画像位置文字列を準備しているようです(なぜ警告機能があるのでしょうか)。

私のエラーが表示されているところであれば、何か助けていただければ幸いです。おかげさまで、初心者レベルのコードXDをお詫びします。

$.fn.preload = function() { 
     this.each(function(){ 
      $('<img/>')[0].src = this; 
     }); 
    } 

    function nextImg() { 
     var curImg = "images/"; 
     var randomNumber=Math.floor(Math.random()*11) 
     curImg += randomNumber; 
     curImg += ".jpg"; 
     alert(curImg); 
     $([curImg]).preload(); 
    } 

    nextImg(); 

    $("document").ready(function() { 
     $("#umom1").animate({ 
      opacity: 0 
      }, 1900,function() { 
      $("#umom1").attr("src", curImg); 
      $("#umom1").animate({ 
       opacity: 1 
       }, 1900); 
      }); 


    }); 

答えて

3

変数のスコープの問題、curImgは、グローバルスコープで定義されていないあなたが関数自身以外のどこからでもアクセスすることはできませんので、あなたは、それは、ローカル関数スコープで定義されていています。

nextImg()関数内でvarキーワードを使用したため、変数の有効期間はその関数にのみ制限されています。

私はそうのように、nextImg()からcurImg変数を返すことをお勧め:

function nextImg() { 
    var curImg = "images/"; 
    var randomNumber = Math.floor(Math.random()*11); 
    curImg += randomNumber; 
    curImg += ".jpg"; 
    alert(curImg); 
    $([curImg]).preload(); 
    return curImg; 
} 

あなたready機能は、このようになります。

$(document).ready(function() { 
    var img = nextImg(); 
    $("#umom1").fadeOut(1900, function() { 
     $("#umom1").attr("src", img); 
     $("#umom1").fadeIn(1900); 
    }); 
});