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/