jQuery animación de palanca

Question

tengo este 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); 
    }); 
}); 

Esto está trabajando muy bien, pero necesito para ampliar la funcionalidad un poco. También quiero manipular de manera similar las propiedades de otro div en sincronización con el #panel div. Traté de agregar dos funciones más relacionadas con el div secundario, pero acabo de obtener un alternar de 4 fases ... jaja! ¡Perdona mi ignorancia!

Gracias chicos!

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

no creo que la adición de dos funciones dentro de la función de palanca funciona para un evento click registrado (A menos que me falta algo)

Por ejemplo:

$('.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');" 

Sólo hay que poner dos paradas: una onmouseover y una onmouseout.