在 jQuery 中多次单击显示/隐藏函数

Question

我做了这样：代码笔或代码下来$(document).ready(function () {  var btn1Status = 0;  $("button").click(function () {    if (btn1Status === 0) {      $(".info").slideDown();      $(".info").show("slow");      $("button").text("less");      btn1Status = 1;    } else {      $(".info").slideUp();      $(".nfo").hide("slow");      btn1Status = 0;      $("button").text("More");    }  });  });button {  background-color: black;  color: white;  width: 50px;  height: 30px;}button:focus {  outline: none;}ul {  list-style-type: none;  margin: 10px;  padding: 0;}.info {  background-color: black;  color: white;  font-family: arial;  width: 400px;  display: none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><div><img src="https://img.favpng.com/22/6/0/portable-network-graphics-movie-camera-film-clip-art-computer-icons-png-favpng-qfZ7hHPN2CCxiK8sYfjS2Sti9.jpg" width="400"><button>More</button></div><div class="info">  <ul>    <li>Name: movie1</li>    <li>Time: 6:00PM</li>    <li>Info 3 : blablabla</li>    <li>Info 4 : blablabla</li>                   </ul></div>。当有人单击该按钮时，应显示信息 div。问题是，如果我多次单击该按钮，然后将其抬起，它将继续显示和消失。如何解决此问题。感谢您的帮助。

Answer 1

如果您希望能够让用户多次单击但不构建动画队列，则可以使用jQuery中的stop函数来停止/清除任何当前正在运行的动画的队列。

if (btn1Status === 0) {

  $(".info").stop(true, true).slideDown();

  $(".info").show("slow");

  $("button").text("less");

  btn1Status = 1;

} else {

  $(".info").stop(true, true).slideUp();

  $(".info").hide("slow");

  btn1Status = 0;

  $("button").text("More");

}

如果多次单击按钮，这将取消动画队列。的两个参数是： 。clearQueue 需要清除当前动画队列，jumpToEnd 将在跳到下一个动画之前取消当前正在运行的动画，或者从当前动画帧开始运行下一个幻灯片动画。.stop()( [clearQueue ] [, jumpToEnd ] )