8

ラジオボタンが押されたときに要素を表示するスクリプトがあります。要素の表示をフェードインしようとしているので、それほど突然ではありません。

JS:

document.getElementById('next').style.display = 'block';
document.getElementById('next').fadeIn(1000);

これは、アニメーションのフェードを除いて正常に機能します。私は何を間違っていますか。両方のステートメントを 1 つのステートメントに結合しようとしました。また、display:block の前にフェードインを設定しようとしましたが、まったく表示されません。JS はまだかなり新しいので、何が可能かを理解しようとしています。前もって感謝します

4

4 に答える 4

4

CSS3 を使用してこの効果を開発できます。

この HTML では:

<div id='fader'></div>

そしてこのスタイル：

#fader {
   opacity:0;
   -webkit-transition: opacity 2s;
   -moz-transition: opacity 2s;
   -o-transition: opacity 2s;
   transition: opacity 2s;
}

スタイルから表示属性を削除します。

その後、JavaScript を使用してスタイルを変更すると、効果が自動的に発生します。

document.getElementById('fader').style.opacity = 1;

デモ: http://jsfiddle.net/AUak7/

于 2013-05-31T15:23:22.550 に答える
4

.fadeIn()DOM 要素にはメソッドがありません。

document.getElementById('ques_2').fadeIn(1000);

おそらく、jQuery やその他のライブラリ コードを目にすることでしょう。そのコードは、DOM 要素をラップする jQuery (または何でも) オブジェクトで実行する必要があります。

最新のブラウザーで機能する別のアプローチは、CSS3 トランジションを使用することです。JavaScript に新しいクラスを適用させ、CSS に視覚効果を任せることができます。

jQuery などのライブラリを使用したい場合は、それをページにインポートする必要があります。たとえば、これをheadページの に挿入します。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

次に、DOM 要素をフェッチしてメソッドを呼び出すためのAPI ルールに従います。

ネイティブ DOM メソッドを使用してフェッチを行うことも、jQuery を使用することもできます。これは、ロードすることにした場合に意味があります。

于 2013-05-31T15:18:26.470 に答える
2

単純なJavaScriptを使用すると、このようなことができます...ここでは、不透明度の値を増加させて出力しています...

デモ

function show() {
    document.getElementById('next').style.opacity = (parseFloat(document.getElementById('next').style.opacity) + 0.1);
    document.getElementById('value').innerHTML = (document.getElementById('next').style.opacity);
    if (document.getElementById('next').style.opacity < 1) {
        setTimeout(show, 400);
    }
}

function fadeIn() {

    document.getElementById('next').style.opacity = 0;
    document.getElementById('next').style.display = 'block';
    setTimeout(show, 400);
}

fadeIn();
于 2013-05-31T15:36:15.583 に答える