jquery autoclose alert不能正常工作

Question

我试图用jquery创建一个简单的autoclose警报，但有一些问题。 警报会自动关闭，但如果连续点击几次，警报将显示/隐藏多次。 而如果突然点击按钮，我想替换之前的警报。 这里是我的代码：

HTML

<button id="btn">Show Alert</button> 
<table id="tbl"> 
<tr> 
    <td width=200 height=200> 
     <div id="alt"></div> 
    </td> 
    <td> 
     <div id="btncnt"></div> 
     <div id="altcnt"></div> 
    </td> 
</tr> 
</table> 

脚本

$("#tbl").hide(); 
$("#alt").hide(); 
$("#btncnt").hide(); 
$("#altcnt").hide(); 

var btncount = 0; 
var altcount = 0; 
function autoclosealert(message){   
$('#alt').html(message) 
.show(800) 
.hide(800, function(){altcount+=1;}); 

$('#btncnt').html("Btn Click: "+btncount); 
$('#altcnt').html("Alt Count: "+altcount); 
} 
$("#btn").click(function(){ 
$("#tbl").show(); 
$("#btncnt").show(); 
$("#altcnt").show(); 
autoclosealert("Hello !!!"); 
btncount+=1; 
}); 

CSS

#alt{ 
border: 1px solid grey; 
background-color: blue; 
padding: 20px; 
} 

这是我的小提琴链接 http://jsfiddle.net/mitu/6mv18jms/

Answer 1

您需要添加任何新的动画队列，清除以往任何之前调用每次点击stop()：

$('#alt').html(message) 
    .stop(true) 
    .show(800) 
    .hide(800, function() { 
     altcount += 1; 
    }); 

Updated fiddle

Answer 2

您可以添加stop()功能停止以前的所有动画。

$('#alt').html(message) 
.stop(true) 
.show(800) 
.delay(2000) 
.hide(800, function(){altcount+=1;}); 

在include delay（）函数中，如果你需要的话。

http://jsfiddle.net/6mv18jms/5

Answer 3

其良好禁用按钮，直到动画没有完成，而不是连续的方式排队的动画。

JS代码：

function autoclosealert(message) { 
$('#alt').html(message) 
    .show(800) 
    .hide(800, function() { 
    altcount += 1; 
    $('#btn').removeAttr('disabled'); //enable the button after animation is completed 
}); 

$('#btncnt').html("Btn Click: " + btncount); 
$('#altcnt').html("Alt Count: " + altcount); 
} 
$("#btn").click(function() { 
    $('#btn').attr('disabled', 'disabled'); //disable the button on click 
    $("#tbl").show(); 
    $("#btncnt").show(); 
    $("#altcnt").show(); 
    autoclosealert("Hello !!!"); 
    btncount += 1; 
}); 

现场演示@的jsfiddle：http://jsfiddle.net/6mv18jms/4/