トグルが実行されない

Question

私は、実行中のクリック機能を持っています。これは、fadeTogglesが機能するためです。しかし、アニメーション化しようとしているdiv＃overlay-sourcesはアニメーション化されていません。私はそれを0pxの高さに設定してから、480pxにアニメーション化する必要があります。アニメーション自体は機能しているので、私はトグル機能の外でそれをテストしました。しかし、どうにかしてトグル機能は実行されません。

$("#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は不要です。