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]）检查正在运行的动画。是（'：animated'）。这个方法返回一个bool。

效果的Jquery设置限制（margin-left）

1 个答案: