如何使用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。。。我是这样解决的：

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

Answer 2

有一个方法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>