Question

http://mmowned.org/dragon/slm/menu9.html

In an attempt to solve the animation queing in the old version (menu7.html) I tried using .stop() in the dropdown menu.
Problem is when you “stop” the dropdown halfway through and then start it again, it breaks the menu and only extends back to where it stopped :/

I’m pretty sure this is really simple, but how can I fix this?

$(document).ready(function() {  
    var nid=["bottom","nav","news","wow","emu","war","aoc","diablo","prog","trade"];  
    $('li.navhead2').click(function () {  
    var id = $(this).attr('id')  
    var query = jQuery.inArray(id, nid)  
    if (query !== -1 && query !== 0)  
    {  
       $("#menu"+query).slideFadeToggle('slow');  
        if (query !== 1 && query !== 0)  
        {  
        $(this).toggleClass("clicked");  
        }  
        else  
        {  
        $(this).toggleClass("clicked1");  
        }  
    }  
    else if (query === 0)  
    {
    $("[id^=menu]").not("#menu1").slideUp('fast');  
    $("li.navhead2").removeClass("clicked");  
    }  
    });   
 slide("#sliding-navigation", 160, 182, 150, .8);  
  });  

---

jQuery.fn.slideFadeToggle = function(speed, easing, callback) {  
    return this.stop().animate({opacity: 'toggle', height: 'toggle', queue:false}, speed, easing, callback);  
};

the slide function works how I want it to, but the dropdown doesn’t (breaks as stated earlier) and for some reason my toggleclass isn’t working either (but it is on the old version)

Answer 1

You use the toggle value to the height parameter.
You also allow the user to interrupt the animation by clicking it again (the .stop() part).

If during animation I interrupt it (let’s say to his 50% of height), in the next call my animate will go from 50% to 0. My next one will go from 0 to 50%.

Stop documentation points out that you can specify wether to clear the queue and/or to goto the end of the animations. These are your cases.

jQuery.fn.slideFadeToggle = function(speed, easing, callback) {  
    return this.stop(true,true).animate({opacity: 'toggle', height: 'toggle', queue:false}, speed, easing, callback);  
};

Notice the two true values added to the stop. This should work.