Редактировать Css с эффектом анимации - PullRequest
Новая
       6

Редактировать Css с эффектом анимации

0 голосов
/ 13 июня 2010

У меня есть div в абсолютной позиции со значением "top" по умолчанию, установленным на "-200px". Когда я нажимаю на div, значение «top» обновляется до «0». Таким образом, я вижу весь Div.

Это JS: 

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

Есть ли способ достичь этого результата, но с анимацией? Например, эффект скольжения вниз?

Кроме того, когда я нажимаю в другой раз на div, я бы хотел, чтобы значение "top" было восстановлено до "-200px".

1 Ответ

3 голосов
/ 13 июня 2010

Конечно.Используйте метод .animate().И вместо события click используйте toggle, который принимает две функции для до / после.

Live Пример: 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 документы:

...