Stop jQuery animations

Question

My JavaScript is as follows:

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

I have many links on a page that will load this jQuery AJAX and display the status in a div correctly. It all works fine, except if a user click many of the links really fast. The data changes correctly, but the animations are delayed. I've tried including the jQuery stop() and stop(true) and stop(true, true) before the .show but it doesn't seem to help much. Animations can continue long after the last click; for example, if a user clicks 20 times, and then pauses, the hide animations seem to continue long afterwards, despite the stop(). What I want is if a user clicks on another link that causes the AJAX to cause a status display, the basically "resets" the status animations.

Any ideas?

Here's the full relevant 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>

and some relevant HTML, this is within a larger table:

    <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> 

The user would click on the "Pick" link or the delete Image which calls the jQuery AJAX get.

Any other improvements to my (limited shown) code are appreciated as well.

jquery version:1.4.2 jqueryui version:1.7.2

Answer 1

Maybe stop() doesn't clear the delay() -- have you tried the .clearQueue() method?

alternatively, you could try with setTimeout rather than 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);