我的JavaScript如下:
$.get("/<page>.php", "userid='.$userid.'&"+status, function(data){
$("#status").show("fast").html(data).delay(4000).hide("fast");
});
我在页面上有许多链接,这些链接将加载此jQuery AJAX并在div中正确显示状态。一切正常,除非用户真正快速地单击许多链接。数据正确更改,但是动画被延迟。我试过在
stop()
之前包含jQuery stop(true)
和stop(true, true)
和.show
,但这似乎并没有太大帮助。动画可以在最后一次点击后继续。例如,如果用户单击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> </td>
</tr>
用户将单击“ Pick”链接或调用jQuery AJAX get的删除图像。
我的代码(有限显示)的任何其他改进也将受到赞赏。
jQuery版本:1.4.2
jqueryui版本:1.7.2
最佳答案
也许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);