在 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) {&nbsp; $(".info").stop(true, true).slideDown();&nbsp; $(".info").show("slow");&nbsp; $("button").text("less");&nbsp; btn1Status = 1;} else {&nbsp; $(".info").stop(true, true).slideUp();&nbsp; $(".info").hide("slow");&nbsp; btn1Status = 0;&nbsp; $("button").text("More");}如果多次单击按钮，这将取消动画队列。的两个参数是： 。clearQueue 需要清除当前动画队列，jumpToEnd 将在跳到下一个动画之前取消当前正在运行的动画，或者从当前动画帧开始运行下一个幻灯片动画。.stop()( [clearQueue ] [, jumpToEnd ] )