Éditer Css avec effet d'animation

Question

J'ai une div dans une position absolue avec une valeur "top" par défaut réglée sur "-200px". Lorsque je clique sur la div, la valeur "top" est mise à jour à "0". De cette façon, je vois toute la Div.

C'est le js:

$(document).ready(function(){ 
    $("#search_bar").click(function() { 
    $(this).css("top","0"); 
    }); 
}); 

Est-il un moyen de parvenir à ce résultat, mais avec une animation? Par exemple, un effet de glissement vers le bas?

Aussi, quand je clique une autre fois sur la div je voudrais que la valeur "top" soit restaurée à "-200px".

Answer 1

Bien sûr. Utilisez la méthode .animate(). Et au lieu de l'événement click, utilisez toggle qui accepte deux fonctions pour avant/après.

en direct Exemple:http://jsfiddle.net/a86tm/1/

$(document).ready(function(){ 

    $("#search_bar").toggle( // toggle() takes 2 functions 
     function() { 
      $(this).animate({top: 0}, 500); // Use animate() to animate the transition. 
     },         // The 500 argument is the duration. 
     function() { 
      $(this).animate({top: -200}, 500); 
     } 
); 

});​ 

---

docs jQuery:

• .toggle() - http://api.jquery.com/toggle
• .animate()-http://api.jquery.com/animate