php - 停止 jQuery 动画

Question

我的 JavaScript 如下:

$.get("/<page>.php", "userid='.$userid.'&"+status, function(data){
        $("#status").show("fast").html(data).delay(4000).hide("fast");
    });

我在一个页面上有许多链接，这些链接将加载此 jQuery AJAX 并在 div 中正确显示状态。一切正常，除非用户非常快速地单击许多链接。数据正确更改，但动画延迟。我试过在 .show 之前包括 jQuery stop() 和 stop(true) 和 stop(true, true) 但它似乎并没有多大帮助。最后一次点击后动画可以继续很长时间；例如，如果用户点击 20 次，然后暂停，隐藏动画似乎会在之后继续很长时间，尽管有 stop()。我想要的是，如果用户单击另一个导致 AJAX 导致状态显示的链接，基本上会“重置”状态动画。

有什么想法吗？

这是完整的相关 JavaScript:

    <script type="text/javascript">
    ...
        $(document).ready(function () {
            $("#entry a.styled").live("click", function(event){
        var status = $(this).attr("rel")+"&game="+$(this).attr("name");
        var teamid = $(this).attr("rel");       
        var gameid = $(this).attr("name");
        $("[name="+gameid+"]").show(1);
        $(this).hide(1);
        $("[rel=t"+teamid.replace("pick=", "")+"]").removeClass();
        $("[name=t"+gameid+"]").removeClass();
        $("#t"+teamid.replace("pick=", "")).addClass("hilite");
        $.get("/<filename>.php", "userid=1&"+status, function(data){
            $("#status").stop(true, true).show("fast").html(data).delay(4000).hide("fast");
        });
    });
    </script>

和一些相关的 HTML，这是在一个更大的表格中:

    <tr class="row-a"> 
    <td>8-man</td> 
    <td>1:00 pm</td> 
    <td class="hilite" id="t298" rel="t233" name="t3235"><a href="/team/la_veta/2010/">La Veta</a></td> 
    <td><a href="#" style="display:none" name="3235" class="styled" rel="pick=298">Pick</a></td> 
    <td><a href="#" name="3235" class="styled" rel="delete=3235"><img src="/images/delete.png" height="12" width="12" /></a></td> 
    <td><a href="#" name="3235" class="styled" rel="pick=233">Pick</a></td> 
    <td id="t233" rel="t298" name="t3235"><a href="/team/south_park/2010/">South Park**</a></td> 
    <td>&nbsp;</td> 
</tr> 

用户将单击“选择”链接或调用 jQuery AJAX get 的删除图像。

对我的(有限显示的)代码的任何其他改进也表示赞赏。

jquery版本:1.4.2 jqueryui 版本:1.7.2

Answer 1

也许 stop() 没有清除 delay() —— 你试过 .clearQueue() 了吗？方法？

或者，您可以尝试使用 setTimeout 而不是 delay()...

// animInProgress and animDelay are global variabes
var animInProgress = false;
var animDelay;

//later, in your $.get success function...
$("#status").show("fast").html(data);
if(animInProgress) {
    clearTimeout(animDelay);
}
animInProgress = true;
animDelay = setTimeout(function() {
    $("#status").hide("fast");
    animInProgress = false;
}, 4000);