Question

I have a main nav button that moves down slightly On hover, then back again on hover out. On click of this button releases a dropdown div that contains lots of html, on click again and obviously the box goes back up. However other buttons with dropdowns on the page and they need to get out of each others way, so each button also closes every other dropdown box as well. Right now im doing it with toggle which, if you close the box with another button, you have to click twice to get the dropdown down again on the main button.

Toggle is efficient, but what would be the efficient way to do toggle style jquery animations with if statements? so something like on click if animated down, animate up else animate down. I basically dont know how to write inside the if part. I have seen examples with something like if(:animated) but thats to tell if there was any general animation.I have lots of instances I want to apply this to so I need to be specific like:

if(:animation).top = 150{ (div).animate(top = 0)} else {(div).animate(top = 150)}

also, when you rollover and the top button moves down a bit, how would I keep it down when the dropdown is down and goes back up when the dropdown goes back up?

here is a jsfiddle so you can see what im talking about easier. Its not perfect but my homepage looks similar, let me know if I was confusing on any part and I will edit this!

http://jsfiddle.net/9DN52/1/

Answer 1

In my opinion your code is efficent enough so what you need to do just add a class to see if its clicked than stop hover’s action with it.

jQuery:

$("#down").hover(
    function() {
        $(this).stop().animate({top:0},200);
    },
    function() {
        // this will alert the situation for you to understand
        alert($(this).hasClass("isDown"));
        // if its clicked than do not move!
        if ($(this).hasClass("isDown") == false) {
            $(this).stop().animate({top:-5},220);
        }
    }
);

$("#down").click(
    function() {
        $("#DropUp").stop().animate({bottom:-250},220);
        // Add a class to see if its clicked
        $(this).toggleClass("isDown");
    }
);

worked around your fiddle: http://jsfiddle.net/9DN52/14/

Edit:

I also solved a couple bugs, made some code fixes, added descriptions and i thought what you actually wanted to do was this:

jQuery:

// Actually you can do this with css transition
// Remove these descriptions for a cleaner looking code
$("#down").hover(
    function() { $(this).stop().animate({top:0},200); },
    function() {
        // if its clicked than do not move!
        if ($(this).hasClass("isDown") == false) {
            $(this).stop().animate({top:-5},220);
        }
    }
);
// Instead of toggle simple click action is enough
$("#down").click( function() {
    // Thanks to class selector now we know
    // if its clicked or down, so we know what to do..
    if ($("#down").hasClass("isDown") == false) {
        $("#DropDown").stop().animate({top:0},250);
        // if footer is up already this will hide it
        $("#DropUp").stop().animate({bottom:-250},220);
        $("#up").removeClass("isUp");
    } else {
        $("#DropDown").stop().animate({top:-250},220);
    }
    // Each click should change the down situation
    $("#down").toggleClass("isDown");
});
// Instead of toggle simple click action is enough
$("#up").click( function() {
    // If its up already
    if ($(this).hasClass("isUp") == false) {
        $("#DropUp").stop().animate({bottom:0},250);
        // if header is down already this will hide it
        $("#DropDown").stop().animate({top:-250},220);
        $("#down").stop().animate({top:-5},220).removeClass("isDown");
    } else {
        $("#DropUp").stop().animate({bottom:-250},220);
    }
    // Each click should change the up situation
    $("#up").toggleClass("isUp");
});

fiddle: http://jsfiddle.net/9DN52/43/