Jquery 设置效果限制（左边距）

Question

我正在尝试在我的导航菜单上设置最大和最小限制。到目前为止，我的代码几乎可以完美运行......

var navmenuliwiwdth = 0;

$('#othermenu ul li').each(function() {
    navmenuliwiwdth += $(this).outerWidth();
});

$('#otherleftarrow').click(function() {
    if ( parseInt($('#othermenu ul').css('margin-left')) < 0 )
        $('#othermenu ul').animate({'margin-left': '+=50'}, 200);
    return false; 
});

$('#otherrighttarrow').click(function() {
    if ( navmenuliwiwdth > 638 && parseInt($('#othermenu ul').css('margin-left')) > (638 - navmenuliwiwdth))
        $('#othermenu ul').animate({'margin-left': '-=50'}, 200);
    return false;
});

​右箭头限制效果很好。但是留下一个经常行为不端......如果我快速单击右箭头而不是等待滑块单击左箭头几次，它会达到 50px 边距。我想知道为什么会发生这种情况，如果有任何方法可以解决它，我知道它与< 0有关。

有什么想法吗？

我在这里工作：http://jsfiddle.net/sandrodz/TsGqU/5/

Answer 1

您必须在 jQuery 中设置一个.stop() 方法来停止和清除动画队列，否则它会在足够快地单击元素时显示异常行为。

http://jsfiddle.net/TsGqU/4/ http://jsfiddle.net/TsGqU/7/

如需进一步阅读，请参阅 jQuery API http://api.jquery.com/stop/

编辑：我刚刚添加了另一个条件，因此只要最后一个动画正在运行，动画就不会触发。您可以使用 $([selector]).is(':animated') 检查正在运行的动画。此方法返回一个布尔值。