jQuery bascule cliquez sur

Question

Dites que j'ai besoin d'un élément pour animer lorsque je clique dessus. Pour ce faire, je viens:

$('#header .icon').click(function() { 
    $('#header form').animate({width:'195px'}); 
}); 

Mais comment pourrais-je faire en sorte que lorsque je clique sur l'élément à nouveau l'Animer opposé a lieu? (Par exemple Animer largeur: 0px;)

Answer 1

Vous pouvez utiliser .toggle() comme ceci:

$('#header .icon').toggle(function() { 
    $('#header form').animate({width:'195px'}); 
}, function() { 
    $('#header form').animate({width:'0px'}); 
}); 

Si elle était initialement sur vous pouvez basculer sa largeur comme ceci:

$('#header .icon').click(function() { 
    $('#header form').animate({width:'toggle'}); 
}); 

Answer 2

I a eu un problème similaire aujourd'hui, et aucune des réponses ici résolu pour moi. Ma solution consistait à enregistrer les états afin que différentes choses se produisent lorsque le même élément est cliqué:

var estado="big"; 
$(".snacks").click(function() { 
    if(estado == "big"){ 
     $("#men_snacks").animate({width:"183px", height:"45px"}, 1000); 
     return estado="small"; 
    } else if(estado == "small") { 
     $("#men_snacks").animate({width:"82%",height:"550px"},1000); 
     return estado="big"; 
    } 
});