[JQuery] Edit Css with animation effect

Question

Hi, I've a div in a absolute position with a default "top" value set to "-200px". When i click on the div the "top" value is updated to "0". In this way I see the entire Div.

This is the js:

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

Is there a way to achieve this result but with an animation? For example, a slide down effect?

Also, when i click another time to the div I'd like that the "top" value will be restored to "-200px".

Answer 1

Of course. Use the .animate() method. And instead of the click event, use toggle which accepts two functions for before/after.

Live Example: 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);
      }
  );

});​

---

jQuery docs:

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