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

Question

我做了这样的事情：
Codepen或codedown。

$(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");
}

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