JQuery Animate Div "как" Zoom

Question

Я никогда не смогу заставить их работать - извините, - но я пытаюсь анимировать мышь, а затем "реанимировать" мышь. Я никогда не смогу заставить $('#xyz').hover(function(){'something',function(){'somethingelse'}); работать. Надеюсь, вы, ребята, можете помочь.

То, что я пытаюсь сделать, это анимировать + и - 20px (сверху и слева) на некоторых абсолютно позиционированных элементах div, а затем добавить 40px к высоте width, возвращаясь к исходной позиции / width / height при наведении мыши. Я даже не дошел до ширины / высоты css ....

Вот мой код (который неправильный - ну, должно быть, он не работает :-))

  $('.box').hover(function(){

 $(this).animate({'top':'-20','left':'-20'},function(){

   $(this).animate({'top':'20','left':'20' });


      });

Помощь действительно приветствуется. Заранее спасибо

Answer 1

Вы вкладываете не в те места;)

 $('.box').hover(
      function(){
           $(this).animate({'top':'-20px','left':'-20px'});
     },
      function(){
        $(this).animate({'top':'20px','left':'20px' });
      }
 );

Как вы делали, вы использовали функцию обратного вызова метода animate.Итак, вы вызывали вторую анимацию, когда первая закончилась, а не когда мышь вышла из строя ..

---

Обновление

Дополнительно вам необходимо предоставить юнитдля вычислений, которые вы выполняете, добавьте px рядом с вашими номерами, и если вы хотите, чтобы он изменился относительно текущей позиции, используйте += и -=

 $('.box').hover(
      function(){
          $(this).animate({'top':'-=20px','left':'-=20px', 'height':'+=40px'});
     },
      function(){
        $(this).animate({'top':'+=20px','left':'+=20px', 'height':'-=40px' });
      }
 );

Пример:http://www.jsfiddle.net/e3h43/1/

Answer 2

Хорошо, превращаю мой комментарий в ответ:

Вы сделали опечатку, вы пропустили заключительный peren после первого animate вызова.