0

たとえば、 という関数がありますshowcontainer。それをアクティブにするボタンをクリックすると、特定の div 要素 (この場合<div id="container">は ) がフェードインします。もう一度クリックすると、フェードアウトします。どうすればこれを達成できますか?

注: 私は jQuery に慣れていません。

4

5 に答える 5

2

たくさんの jQuery の回答が得られました。それは結構です。私はこの種のものにも jQuery を使用する傾向があります。しかし、単純な JavaScript でそれを行うのは難しくありません。

var container = document.getElementById('container');
var btn = document.getElementById('showcontainer');

btn.onclick = function() {

    // Fade out
    if(container.style.display != 'none') {
      var fade = setInterval(function(){
        var opacity = parseFloat(container.style.opacity);
        opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
        opacity -= 5;
        container.style.opacity = opacity/100;
        if(opacity <= 0) {
          clearInterval(fade);
          container.style.opacity = 0;
          container.style.display = 'none';
        }
      }, 50);

    // Fade in
    } else {
      container.style.display = 'block';
      container.style.opacity = 0;
      var fade = setInterval(function(){
        var opacity = parseFloat(container.style.opacity);
        opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
        opacity += 5;
        container.style.opacity = opacity/100;
        if(opacity >= 100) {
          clearInterval(fade);
          container.style.opacity = 1;
        }
      }, 50);
    }

};

動作デモを確認してください。

于 2012-10-26T15:58:38.547 に答える
1

jQuery 自体を使用することに反対しなければ、これは簡単に実現できます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#showcontainer').click(function() {
            $('#container').fadeToggle();
        });
    });
</script>
...
<div id="container">
...
</div>
...

<input type="button" id="showcontainer" value="Show/hide"/>
...

http:jQuery のソースの先頭にある欠落に注意してください。このトリックを使用すると、ブラウザは元のページが安全かどうかに基づいて自動的にhttp:orを使用します。https:

jQuery をインクルードした後のコードでは、ハンドラーをボタンに割り当てます。

于 2012-10-26T15:32:00.430 に答える
1

あなたができる最善のことは、今すぐ始めて、jQuery に慣れることです。

ページhttp://api.jquery.com/fadeIn/には、ここに記述できるすべてのサンプル コードがあります。基本的には、showcontainer 関数で fadeIn を呼び出す必要があります。

function showcontainer() {
    $('#container').fadeIn();
}
于 2012-10-26T15:26:01.793 に答える
0

jQuery UI Toggleを見ることができます。

ドキュメントでは、ライブラリの使用が非常に簡単になり、多くのコード例が含まれています。

于 2012-10-26T15:24:46.667 に答える
0

jQuery を学習するのは、物事を行うのがずっと簡単になるからです。

その音から、コンテナー div を既に HTML に含めることができますが、「display:none;」のスタイルを使用し、( jQuery )を使用してクリック イベントで表示するだけです。

$('#container').fadeIn('slow', function() {
    //Any additional logic after it's visible can go here
  });
于 2012-10-26T15:25:14.867 に答える