切换未执行

Question

I have a click function, which is being executed, because the fadeToggles work. But the div#overlay-sources I'm trying to animate, isn't animated. I have set it a height of 0px to start with, and then it should be animated to 480px. The animation in itself works, I have tested it outside of the toggle function. But somehow the toggle function isn't executed.

$("#button-up").click(function(){
    $("#overlay-sources").toggle(
        function()
        {
          $(this).animate({height: "480px"}, 500);
        },
        function()
        {
          $(this).animate({height: "0px"}, 500);
        });

    $("#overlay-sources").fadeToggle('fast');
    $("#blackout").fadeToggle('fast');
});

Answer 1

If you're not opposed to jQueryUI, or have already included it, that entire top part:

$("#overlay-sources").toggle(
        function()
        {
          $(this).animate({height: "480px"}, 500);
        },
        function()
        {
          $(this).animate({height: "0px"}, 500);
        });

Becomes:

$("#overlay-sources").slideToggle(500);

But don't CSS the height to 0, simply display:none , and the function will handle the height animation.

EDIT

I'm sorry, I was mistaken. It looks like slideToggle is a part of the jQuery core library, and does not require jQuery UI

Answer 2

This is what I needed.

$("#button-up").toggle(
    function()
    {
        $("#overlay-sources").animate({top: "141px"}, 500);
        $("#blackout").fadeToggle('fast');
    },
    function()
    {
        $("#overlay-sources").animate({top: "690px"}, 500);
        $("#blackout").fadeToggle('fast');
    }
);