0

HTML コード内のリンクをクリックすると、2 つの異なる div を表示および非表示にするトグル Javascript がコードに含まれています。

function toggleAbout() {
    var ele = document.getElementById("toggleAbout");
    var text = document.getElementById("displayAbout");
    var eleContatti = document.getElementById("toggleContatti");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "About";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "About";
        eleContatti.style.display = "none";
    }
}

function toggleContatti() {
    var ele = document.getElementById("toggleContatti");
    var text = document.getElementById("displayContatti");
    var eleAbout = document.getElementById("toggleAbout");
    if(ele.style.display == "block") {
        ele.style.display = "none";
    }
    else {
        ele.style.display = "block";
        eleAbout.style.display = "none";
    }
}

ただし、divをアニメーション化して、上から下にゆっくりとスクロールし、リンクがクリックされたときに完全に直接表示したくありません。トグル アニメーションを使用した多くの例を見てきましたが、既存のコードにそれらを統合する方法がわかりません。Javascript を使ったことはありませんが、ウェブサイトに Javascript が必要です。どうすればよいですか?

4

1 に答える 1

0

私も JQuery を使用することをお勧めしますが、javascript でも実行できます。あなたがする必要があるのは、css プロパティをtimeouts/intervalsで徐々に変更することです。JQuery を使用すると、これが簡単になります。

$('#selector').animate({'height':'100px'})

たとえば、100 px に達するまで、id セレクターを使用して要素の高さを徐々に増減します。これにより、アニメーションの効果が得られます。

スライドとフェードでは、位置と不透明度をそれぞれ変更できます。

Javascriptでは、 Intervalsを使用する必要があります。

于 2012-12-28T16:04:46.443 に答える