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

このコードを機能させて、さまざまなタイミングで画像がフェードするようにしようとしています。

4

6 に答える 6

2

独自の JavaScript を作成する代わりに、JQuery を使用してそれを実現します (クロスプラットフォームではない可能性があります)。

JqueryのfadeIn()and関数を見てください。fadeOut()

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

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

于 2013-01-08T14:29:56.860 に答える
1

setTimout("fadeit()", 100) あるべきだ と思い ますsetTimeout("fader()", 100)。それ以外の場合faderは呼び出されません...

そして、おそらくある時点でフェードを止めたいと思うでしょう。あなたが持っていた方法では、それは完全にフェードインし、カウンターが4500に達したときに再起動します。具体的fadeitに再度呼び出すまでループを防ぐために、次のようなことを行います:

function fadeit() {
    if (fade < 4500) {
        fade++
        setTimeout("fader()", 100)
    }
    else 
        fade = 1
}
于 2013-01-08T14:32:02.413 に答える
1

への呼び出しごとに実際にフェードを行う必要がありますfadeit。あなたがしているのは、カウントを上げているだけです。また、あなたの論理if...else if...elseは間違っていました。2 番目の条件が true の場合は常に最初の条件が true になるため、2 番目の分岐は行われません。ここに書き直しました：

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-08T14:32:18.837 に答える
0

ループで間違ったメソッドを呼び出しています...変更

setTimout("fadeit()", 100)

に

setTimeout("fader()", 100)
于 2013-01-08T14:32:14.837 に答える
0 
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-08T14:33:23.843 に答える
0

純粋な JavaScript アプローチを使用する場合は、IE の問題などについて考える必要があるかもしれません。

この記事では、「javascript フェード」について少し詳しく説明します。

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-08T14:40:25.497 に答える