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()和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/

试图让我的图像淡出工作

6 个答案: