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;});

如果需要，请包括delay（）函数。

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

Answer 3

在动画未完成之前禁用按钮是好的，而不是以连续的方式排队动画。

JS CODE：

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/

Jquery autoclose警报无法正常工作

3 个答案: