javascript - 试图让我的形象淡出工作

Question

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";
}

我试图让这段代码工作，以便它会在不同时间淡化图像。

Answer 1

我会使用 JQuery 来实现，而不是编写自己的 JavaScript（它可能不是跨平台的）

看看Jquery中的fadeIn()and函数fadeOut()

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

http://api.jquery.com/fadeOut/

Answer 2

我认为 setTimout("fadeit()", 100) 应该是 setTimeout("fader()", 100)。否则fader永远不会被调用...

你可能想在某个时候停止褪色。按照你的方式，它会一直消失，然后在计数器达到 4500 时重新启动。做这样的事情来防止循环，直到你fadeit再次专门调用：

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

Answer 3

您实际上需要在每次调用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()
}

Answer 4

您在循环中调用了错误的方法...更改

setTimout("fadeit()", 100)

到

setTimeout("fader()", 100)

Answer 5

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);
}

Answer 6

我认为，如果您要使用纯 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/