的Javascript淡入/淡出無法正常工作

Question

我的工作，顯示了一些differenty圖像，以及淡入和淡出一些JavaScript庫。不幸的是，我似乎無法得到淡入正常工作。

誰能告訴我如何解決這一問題？ 這是我到目前爲止的代碼：

//This goes in the head of the html file: 
<script type="text/javascript"> 
var imageCount = 4; 
var image = new Array(imageCount); 
image [1] = "slideshow/testimg1.jpg" 
image [2] = "slideshow/testimg2.jpg" 
image [3] = "slideshow/testimg1.jpg" 
image [4] = "slideshow/testimg2.jpg" 
</script> 

//This goes in the body of the html file 
<img width="760" height="260" name="slide"> 
<script type="text/javascript"> 
var step = 1; 
document.images.slide.style.opacity = 1; 
function NextImage() 
{ 
    //Change image 
    document.images.slide.src = image [step]; 
    //Change step 
    if (step < imageCount) 
     step++; 
    else 
     step = 1; 
    FadeIn(); 
} 
function FadeIn() 
{ 
    if (document.images.slide.style.opacity < 1) 
    { 
     //Increase opacity 
     document.images.slide.style.opacity += 0.05; 
     setTimeout("FadeIn()", 20); 
    } 
    else 
    { 
     //Set opacity to 1, fade out 
     document.images.slide.style.opacity = 1; 
     setTimeout("FadeOut()", 4000); 
    } 
} 
function FadeOut() 
{ 
    if (document.images.slide.style.opacity > 0.05) 
    { 
     //Reduce opacity 
     document.images.slide.style.opacity -= 0.05; 
     setTimeout("FadeOut()", 20); 
    } 
    else 
    { 
     //Set opacity to 0.5, change the image 
     document.images.slide.style.opacity = 0.05; 
     NextImage(); 
    } 
} 
NextImage(); 
</script> 

的想法是，是NEXTIMAGE，淡入淡出和功能之間swithes。 我有一切工作除了淡入淡出，因爲它每當我測試它就像這樣：

加載圖像，淡出，加載第二個圖像，凍結。

我希望有人能幫助我。 在此先感謝。

〜盧卡。

編輯： 這個固定：

//Increase opacity 
var x = parseFloat(document.images.slide.style.opacity) + 0.05; 
document.images.slide.style.opacity = x; 
setTimeout(FadeIn, 20); 

謝謝！

Answer 1

變化：

setTimeout("FadeIn()", 20); 

到

setTimeout(FadeIn, 20); 

，看看有沒有什麼幫助（和其他setTimeout的功能一樣）。

EDIT /加成： 的document.images.slide.style.opacity + = 0.05;實際上並沒有增加。嘗試以下修改：

//Increase opacity 
var x = parseFloat(document.images.slide.style.opacity); 
x += 0.05; 
document.images.slide.style.opacity = x; 
setTimeout(FadeIn, 20); 

Answer 2

這是一個工作小提琴。

其實笏正在發生的事情是事件堆在設定的時間進行函數保存之後的特定時間間隔是越來越飛越:)要執行的事件

fiddle

try{ 


    var imageCount = 4; 
var image = new Array(imageCount); 
image [1] = "http://i.dailymail.co.uk/i/pix/2009/06/01/article-0-05144F3C000005DC-317_468x387.jpg"; 
image [2] = "http://images.theage.com.au/ftage/ffximage/kaka_narrowweb__300x323,2.jpg"; 
image [3] = "http://ricardokakaonline.com/wp-content/uploads/2011/10/istoe.com_.br-kaka.jpg"; 
image [4] = "http://farm2.static.flickr.com/1226/1366784050_d697d3cde3.jpg"; 
var step = 1; 
document.images.slide.style.opacity = 1; 
function NextImage() 
{ 
    //Change image 
    document.images.slide.src = image [step]; 
    //Change step 
    if (step < imageCount) 
     step++; 
    else 
     step = 1; 
    FadeIn(); 
} 
function FadeIn() 
{ 
    if (document.images.slide.style.opacity < 1) 
    { 
     //Increase opacity 
     document.images.slide.style.opacity += 0.05; 

     setTimeout(FadeIn(), 200); 
    } 
    else 
    { 
     //Set opacity to 1, fade out 

     document.images.slide.style.opacity = 1; 
     setTimeout(FadeOut(), 2000); 
    } 
} 
function FadeOut() 
{ 
    if (document.images.slide.style.opacity > 0.05) 
    { 
     //Reduce opacity 
     document.images.slide.style.opacity -= 0.05; 
     setTimeout(FadeOut(), 200); 
    } 
    else 
    { 

     //Set opacity to 0.5, change the image 
     document.images.slide.style.opacity = 0.05; 
     NextImage(); 
    } 
} 
NextImage(); 
}catch(e){ 
alert(e) 
} 

嘗試使用jQuery給淡入淡出..我只是添加了一個try catch塊，看看它爲什麼凍結。

繼承人使用JavaScript fade in out