如何使用 jQuery 制作一个简单的淡入淡出 in/out 面板？

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()可以在淡入淡出之间切换。

$("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() 是去这里的方法。

但是如果出于某种原因我只想使用 fadeIn 和 fadeOut...我是这样解决的：

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

如何使用 jQuery 制作一个简单的淡入淡出 in/out 面板？

How to make a simple fade in/out panel with jQuery?

html

javascript

jquery

fadeout

fadein