Toggle не исполняется

Question

У меня есть функция щелчка, которая выполняется, потому что fadeToggles работают. Но div # overlay-sources, которые я пытаюсь оживить, не анимируется. Я установил для него высоту 0px, а затем она должна быть анимирована до 480 пикселей. Анимация сама по себе работает, я тестировал ее вне функции переключения. Но так или иначе функция переключения не выполняется.

$("#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

Это то, что мне нужно.

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

Answer 2

Если вы не против jQueryUI, или уже включили его, что вся верхняя часть:

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

становится:

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

Но не CSS высота до 0, просто display:none, и функция будет обрабатывать анимацию высоты.

EDIT

Я извиняюсь, я ошибся. Похоже, что slideToggle является частью основной библиотеки jQuery и не требует jQuery UI