color - jQuery alternar la animación

toggle css jquery

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á funcionando bien, pero necesito extender 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

No creo que agregar funciones duales dentro de la función de alternar funcione para un evento de clic registrado (a menos que me falte algo)

Por ejemplo:

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

Answer 2

$(''.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 3

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

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

Solo ponga dos paradas: una onmouseover y una onmouseout.