jQueryのトグルアニメーション

Question

私はこのjQueryのを持っています：

$(document).ready(function()
{
   $("#panel").hide();

   $('.login').toggle(
   function()
   {
      $('#panel').animate({
      height: "150", 
      padding:"20px 0",
      backgroundColor:'#000000',
      opacity:.8
}, 500);
   },
   function()
   {
      $('#panel').animate({
      height: "0", 
      padding:"0px 0",
      opacity:.2
      }, 500);
   });
});

これは正常に動作しているが、私は機能を少し拡張する必要があります。私も同様に#panel divのと同期して、別のdivのプロパティを操作したいです。ハハ...私は二div要素に関連する2つの機能を追加しようとしたが、私はちょうど4相のトグルを持って！ 自分の無知を許して！

みんなありがとう！

Answer 1

$('.login').toggle(
    function(){
        $('#panel').animate({
            height: "150", 
            padding:"20px 0",
            backgroundColor:'#000000',
            opacity:.8
        }, 500);
        $('#otherdiv').animate({
            //otherdiv properties here
        }, 500);
    },
    function(){
        $('#panel').animate({
            height: "0", 
            padding:"0px 0",
            opacity:.2
        }, 500);     
        $('#otherdiv').animate({
            //otherdiv properties here
        }, 500);
});

Answer 2

私はトグル機能は、登録済みのクリックイベントのために働くの内側に二重の機能を追加すると思ういけない（私は何かが欠けていない限り）。

例

$('.btnName').click(function() {
 top.$('#panel').toggle(function() {
   $(this).animate({ 
     // style change
   }, 500);
   },
   function() {
   $(this).animate({ 
     // style change back
   }, 500);
 });

Answer 3

onmouseover="$('.play-detail').stop().animate({'height': '84px'},'300');" 

onmouseout="$('.play-detail').stop().animate({'height': '44px'},'300');"

ちょうど2つのストップ置く - 。1つのonmouseoverと一つれるonmouseoutを