ショーワンタイム機能を追加し、既存のスクリプトにアニメーションをスライド

私は私のウェブサイトで素晴らしい作品を表示/非表示のスクリプトを持っている。しかし、1つの問題と1つの要求があります。ショーワンタイム機能を追加し、既存のスクリプトにアニメーションをスライド

に、div要素が表示されたら
を表示する時にのみ1つのdivを許可する必要があり、それヘッダーの下からの「スライド」を持ちます。

ここではスクリプトです：ここで

function toggle_visibility(id) { 
     var e = document.getElementById(id); 
     if(e.style.display == 'block') 
       e.style.display = 'none'; 
     else 
       e.style.display = 'block'; 
    }

はボタンがHTML内のdivのとの関係でどのように働くかある：ここでは

<a onclick="toggle_visibility('testing');">Testing</a> 

<div style="display:none;" id="testing"> 
testing for page 2 
</div>

はのための点で画面のレイアウトでありますスライドアニメーション：

誰かがこれらの関数をスクリプトに追加するのを手伝ったり、同じことをするが別のスクリプトを持っていますが、私に知らせてください。おかげ

出典

2016-09-09 FirstOrderKylo

は、あなたが何かを試してみましたか？あなたはいくつかのhtmlも含める必要があります – DaniP

@DaniP私は過去2時間の間このスクリプトと他のものを使いこなしています。私はまだJavaScriptをよく使いませんし、まだ学んでいます。 ** PS：**ボタンとそのdivのHTMLコードを追加しました – FirstOrderKylo

あなたはjqueryで質問にタグを付けることができますか？私はバニラJSのソリューションを知らないのですが、jquery – DaniP

あなたはjQueryを使って行きたい場合は、slideToggle()を見てみましょう：

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

    <script> 
     var activeDiv = 'welcome'; 
     function toggle_visibility(id) {    
     if (activeDiv === id) return; 
     $('#' + activeDiv).css('display','none'); 
     activeDiv = id; 
     $('#' + id).slideToggle(); 
     $('#' + id).css('display','block'); 
     }; 
     $(document).ready(function() { 
     $('#welcome').slideToggle(); 
     }); 

    </script> 
    </head> 
    <body> 
    <a onclick="toggle_visibility('testing');">Show the First DIV</a><br> 
    <a onclick="toggle_visibility('testing2');">Show the Second DIV</a> 

    <div style="display: none;" id="testing"> 
     The First DIV 
    </div> 

    <div style="display: none;" id="welcome"> 
     Welcome! 
    </div> 

    <div style="display: none;" id="testing2"> 
     The Second DIV 
    </div> 
    </body> 
</html>

出典

2016-09-09 22:00:37

恐ろしい！これは本当にありがとう！ ** Extra ** idの 'welcome'を持つ特定のdivがデフォルトで開くようにする方法を知っていますか？私はこれをやってみましたが、それは常に表示され、他のものはその下に表示される問題を作成します – FirstOrderKylo

答えを更新しました。 –

驚くばかり！手伝ってくれてどうもありがとう。私はこれを何時間も悩ませていましたが、今はそれを働かせています。 – FirstOrderKylo

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
     $("p").slideToggle(); 
    }); 
}); 
</script> 
</head> 
<body> 

<p>This is a paragraph.</p> 

<button>Toggle slideUp() and slideDown()</button> 

</body> 
</html>

出典

2016-09-09 22:05:27 elsayhsoft

ショーワンタイム機能を追加し、既存のスクリプトにアニメーションをスライド

答えて

関連する問題