Question

I’m trying to set max and min limits on my navigation menu. So far I’ve code that works quasi perfectly…

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;
});

​Right arrow limit works pefrctly. But left one misbehaves very often… it goes to 50px margin if I click right arrow fast and than click left arrow few times without waiting for the slider. I wonder why this happens and if there is any way to fix it, I understand it has something to do with < 0

Any ideas?

I was working here: http://jsfiddle.net/sandrodz/TsGqU/5/

Answer 1

You have to set a .stop() method in jQuery to stop and clear the animation queue or else it will show an anormal behaviour while clicking the elements fast enough.

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

For further reading refer to the jQuery API http://api.jquery.com/stop/

Edit: I just added another condition so the animation will not trigger as long as the last animation is running. You can check a running animation with $([selector]).is(‘:animated’). This method returns a bool.