web-dev-qa-db-fra.com

Animation de bascule jQuery

J'ai cette 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);
   });
});

Cela fonctionne bien, mais j'ai besoin d'étendre un peu les fonctionnalités. Je veux également manipuler de manière similaire les propriétés d'un autre div en synchronisation avec le div #panel. J'ai essayé d'ajouter deux autres fonctions relatives au div secondaire, mais je viens de recevoir un interrupteur à 4 phases ... haha! Pardonnez mon ignorance!

Merci les gars!

jqueryanimationtoggle
26
Kevin Brown
$('.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);
});
50
Vincent Ramdhanie

Je ne pense pas que l'ajout de fonctions doubles à l'intérieur de la fonction bascule fonctionne pour un événement de clic enregistré (sauf s'il me manque quelque chose)

Par exemple:

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