如何使用 jQuery 制作簡單的淡入/淡出面板？

Question

我正在嘗試使用 jQuery 在您單擊按鈕時交替淡入和淡出文本。 我想出了這段代碼：

 $("button").click(function() { $('#p1').fadeIn(); $("button").click(function() { $('#p1').fadeOut(); $('button').off("click"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Button</button> <p id='p1'> Paragraph </p>

這只工作一次（第一次點擊淡出，第二次淡出）並且按鈕永遠停止工作。

如果我注釋掉第 5 行，按鈕會工作一次，每次我再次按下它時，文本都會同時淡入和淡出，這不是我想要的。

我究竟做錯了什么？

Answer 1

有一個方法fadeToggle()可以在fadeIn 和fadeOut 之間切換。

 $("button").click(function() { $('#p1').fadeToggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <button>Button</button> <p id="p1">Paragraph</p>

Answer 2

那么，fadeToggle() 是 go 的方式。

但是如果我出於某種原因只想使用fadeIn和fadeOut......我這樣解決了：

var clickCount = 0;
$('button').click(function() {
    if (clickCount % 2 == 0) {
    $('#p1').fadeIn();
    }
    else {
    $('#p1').fadeOut();
    }
    clickCount++;
});