試圖讓我的圖像褪色工作

var fade = 1; 

function fadeit() { 
    if (fade < 4500) 
     fade++ 
    else 
     fade = 1 
    setTimeout("fadeit()", 100) 
} 

function fader() { 
    fadeit() 
    if (fade < 3500) 
     document.getElementById("showone").style.opacity = "0.4"; 
    else if (fade < 500) 
     document.getElementById("showone").style.opacity = "0.1"; 
    else 
     document.getElementById("showone").style.opacity = "1.0"; 
}

我想讓這段代碼工作，以便它會在不同的時間淡出圖像。試圖讓我的圖像褪色工作

來源

2013-01-08 Mikey

你有錯誤代碼：'setTimout'應該是'setTimeout'。 – VisioN

感謝從未注意到，雖然它仍然不起作用 – Mikey

只有在這種不斷調用推子的情況下，元件纔會消失。 – Loris

你需要做的其實每次調用衰落到fadeit。你所做的只是增加計數。此外，您的if...else if...else的邏輯錯誤。每當第二個條件成立時，第一個條件將始終爲真，因此第二個分支永遠不會被採用。我在這裏重寫了它：

var fade = 1; 

function fadeit() { 
    if (fade < 4500) { 
     fade++ 
    } else { 
     fade = 1 
    } 
    doFade(); 
    setTimeout(fadeit, 100) 
} 

function fader() { 
    fadeit() 
} 

function doFade() { 
    if (fade < 500) 
     document.getElementById("showone").style.opacity = "0.1"; 
    else if (fade < 3500) 
     document.getElementById("showone").style.opacity = "0.4"; 
    else 
     document.getElementById("showone").style.opacity = "1.0"; 
}

請注意，這將通過淡入（這是您的原始代碼試圖做的）不斷循環。如果你想淡入一次，並用它做，你可以把它改寫爲：

var fade = 1; 

function fadeit() { 
    if (fade < 4500) { 
     fade++ 
     doFade(); 
     setTimeout(fadeit, 100) 
    } 
} 

function fader() { 
    fade = 1; 
    fadeit() 
}

來源

2013-01-08 14:32:18

此外，更改'setTimeout（「fadeit（）」，100）''setTimeout（fadeit，100）' –

@MattBurland - 好點。完成。還修復了另一個錯誤 –

我會使用jQuery實現這一目標，而不是寫自己的JavaScript（它可能不是跨平臺）

擁有jQuery的

http://api.jquery.com/fadeIn/

http://api.jquery.com/fadeOut/看看fadeIn()和功能

來源

2013-01-08 14:29:56

我認爲setTimout("fadeit()", 100)應該是setTimeout("fader()", 100)。否則fader永遠不會被稱爲...

而且你可能想在某個時刻停止衰落。你有它的方式，將在淡出一路，然後重新啓動，當計數器命中4500做這樣的事情，以防止循環，直到你專門再打電話fadeit：

function fadeit() { 
    if (fade < 4500) { 
     fade++ 
     setTimeout("fader()", 100) 
    } 
    else 
     fade = 1 
}

來源

2013-01-08 14:32:02 AShelly

您的通話環路錯誤的方法。 ..改變

setTimout("fadeit()", 100)

到

setTimeout("fader()", 100)

來源

2013-01-08 14:32:14 ManseUK

var fade=1 

function fader() 
{ 
if (fade<4500) { fade++; } 
else { fade=1; } 
var op=1; 
if (fade < 3500) { op=0.4; } 
else if (fade < 500){ op=0.1; } 
document.getElementById("showone").style.opacity=op; 
//this is a loop i don't know if is the correct behaviour 
setTimeout("fader()",100); 
}

來源

2013-01-08 14:33:23 Loris

我覺得如果你要一個純JavaScript的方式則可能要考慮一下IE的擔憂等..

這篇文章描述它更好一點'javascript fade'。

function fade(elem, time) 
{ 
    var startOpacity = elem.style.opacity || 1; 
    elem.style.opacity = startOpacity; 

    (function go() { 
    elem.style.opacity -= startOpacity/(time/100); 

    // for IE 
    elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')'; 

    if(elem.style.opacity > 0) 
     setTimeout(go, 100); 
    else 
     elem.style.display = 'none'; 
    })(); 
}

下面是一個例子： http://jsfiddle.net/HCzJj/

來源

2013-01-08 14:40:25 bullfrog

試圖讓我的圖像褪色工作

回答

相關問題