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

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

Это js:

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

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

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


jquery css slidedown
person Pennywise83    schedule 12.06.2010    source источник
comment
С помощью функции .slideDown(). :) api.jquery.com/slideDown   -  person edl    schedule 13.06.2010
comment
@edl - метод .slideDown() не делает того, о чем просит ОП.   -  person user113716    schedule 13.06.2010

Ответы (1)


arrow_upward
3
arrow_downward

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

Живой пример: 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:

person user113716    schedule 12.06.2010
comment
Этот код не работает с Google Chrome! Консоль выдает мне эту ошибку: Uncaught SyntaxError: Unexpected token ILLEGAL в строке 6, которая является последней строкой сценария. - person Pennywise83; 17.09.2010
comment
@Pennywise - я предполагаю, что вы скопировали код из jsFiddle? Если это так, есть некоторые невидимые (недопустимые) символы, которые копируются вместе с ним. Либо удалите пробел после окончания кода, либо скопируйте и вставьте код сверху. - person user113716; 17.09.2010