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

Posted 2023-05-08

【中文标题】如何使用 jQuery 制作一个简单的淡入/淡出面板？

【英文标题】：How to make a simple fade in/out panel with jQuery?

【发布时间】：2022-01-16 21:46:07

【问题描述】：

我正在尝试使用 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 行，按钮会工作一次，每次我再次按下它时，文本会同时淡入和淡出，这不是我想要的。

我做错了什么？

【参考方案1】：

嗯，fadeToggle() 是要走的路。

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

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

【讨论】：

如果你想在没有fadeToggle() 的情况下这样做，那么我建议使用元素的当前状态而不是计数：jsfiddle.net/RoryMcCrossan/w4Leqvr6

@RoryMcCrossan 太棒了。谢谢

【参考方案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>

【讨论】：

我已经更新了答案。你可以在jsfiddle.net/kartik_bhalala/j3t01bgk/5this fiddle 上查看。

您的第一个解决方案解决了它，但更新版本实际上只工作一次，就像我的一样。 FTR，不是我否决了你的答案。

您可以使用fadeToggle()方法自动处理fadeIn和fadeOut。您可以根据您的要求使用第一个解决方案。

谢谢。我希望我能知道如何以我想要的方式去做，因为我认为如果我理解它，我会用另一个代码解决另一个问题。

为了将来参考，请在问题中包含代码。用户不必离开现场即可理解您的答案。