javascript - Div のフェードインとフェードアウト

Question

私はあなたの助けが必要です、私は div が 2 秒間遅延し、別の div がクリックされたときにフェードインするウェブサイトに取り組んでいますが、もう一度クリックしたいとき (閉じるために) すぐにフェードアウトしたいです. 何か助けはありますか？

Answer 1

HTML:

<div><a href="#" id="btn">Show div1 and hide div2</a></div>

<div id="div1">Div1</div>
<div id="div2">Div2</div>

CSS:

 #div2 {display:none;}

Jクエリ:

  $('#btn').click(function(e){    
$('#div1').fadeOut('slow', function(){
    $('#div2').fadeIn('slow');
});

});

Answer 2

Jquery を使用できる場合は、次のコードが役に立ちます。これはデフォルトの CSS です。

.invisElem{display:none}

そしてjqueryコード：

$('body').on('click', '.boxbutton1', function(){
        var counter = $(this).data('count');
        if(counter == undefined){
            counter = 0;
            setTimeout(function() {
                $('.gymtext').fadeIn(500)//fadeIn after 2 seconds(2000 ms)
            }, 2000);
        }
        else if(counter == 0){
            $('.gymtext').fadeOut(function(){
                $('.gymtext').remove()
            });//fadeout quickly then remove
        }
    })

コメントを追加するのに助けが必要な場合は、初心者向けに書き留めてみました

Answer 3

    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div").fadeToggle(240);
      });
    });
    </script>

<button>Click to fade DIV</button>

<div id="div" style="width:100px;height:100px;background-color:blue;"></div>