Jquery autoclose alert не работает должным образом

Question

Я попытался создать простое автоклиническое оповещение с помощью JQuery, но у вас есть некоторые проблемы. Предупреждение автоматически закрывается, но если вы нажимаете непрерывно несколько раз, это предупреждение показывает/скрывает это много раз. Принимая во внимание, что я хочу заменить предыдущее предупреждение, если кнопка нажата внезапно. Вот мои коды:

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> 

Script

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

Включите функцию 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/