JS callback中alert弹窗出现多次的问题_callback里加弹窗-CSDN博客

本文链接：https://blog.csdn.net/weixin_38273916/article/details/78834648

写了个简单的页面。

单机HIde按钮，隐藏标签为P内容。并callback alert。

隐藏后，callback弹窗出现三次

代码如下：

HTML文件

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script src="myjs.js"></script>
<title></title>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;/*加载时为隐藏状态*/
}
div.animate{
height: 100px;
width: 100px;
position: relative;
background: red;
}
</style>
</head>
<body>
<p class="set">set it in red.</p>
<button type="button" id="hide">Hide</button>
<button type="button" id="show">Show</button>
<div class="panel">
<p>
Here is going to slip.
</p>
</div>
<p class="flip">click Here</p>
<div class="animate"></div>
<button id="stop">Stop</button>
</body>

</html>

JS文件

//$(document).ready(funciton(){...});jQuery函数写在这里，页面加载后运行$
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000,function(){
alert("already hidden");
});
});
$("#show").click(function(){
$("p").show(1000);
});
$(".flip").click(function(){
$(".panel").slideToggle("slow");
// alert("yes");
});
$(".animate").click(function(){
$(".animate").animate({left:"250px",opacity:"0.4"},2000);
$(".animate").animate({left:"0px",opacity:"1"},2000);
});
$("#stop").click(function(){
$(".animate").stop();
});
});