JQuery animate div“喜欢”缩放答案

【问题标题】：JQuery animate div "like" a ZoomJQuery animate div“喜欢”缩放
【发布时间】：2011-01-03 18:47:56
【问题描述】：

我永远无法让这些工作 - 抱歉 - 但我试图在鼠标上设置动画，然后在鼠标移出时“重新设置动画”。我永远无法让$('#xyz').hover(function(){'something',function(){'somethingelse'}); 工作。希望大家帮忙。

我要做的是在一些绝对定位的 div 上为 + 和 - 20px（顶部和左侧）设置动画，然后在鼠标移出时将 40px 添加到宽度高度返回到原始位置/宽度/高度。我什至还没有达到 css 宽度/高度....

这是我的代码（这是错误的 - 肯定是因为它不起作用:-)）

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

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

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


      });

帮助真的很感激。提前致谢

【问题讨论】：

您在第一次animate 通话中错过了第二次peren。不确定这是复制错误还是您的问题。
@zzzzBov - 这是我的问题，谢谢。

标签： jquery jquery-animate

【解决方案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/

【讨论】：

@Gaby - 感谢这个/它对一个例外（不是你的错）有效 - 我的错在于没有真正提出正确的问题。我真正从 div 的位置 +/-20px 确定它（我有 6 个）所以选择“top：-20”或“top：+20”在第一个但不是其他的，因为它们都“top” +/-20" - 知道如何用“偏移量”来做到这一点吗？所有 div 在“相对”包装器中都是绝对位置”
@Gaby - 完美 - 请帮助我了解（如果你愿意的话）'-20px' 和 '-=20px' 等之间有什么区别？
@Russell，-= 和 += 模仿相关的 javascript 速记运算符 (developer.mozilla.org/en/Core_JavaScript_1.5_Guide/…)。 -= 10px 表示从当前值中减去 10px。

【解决方案2】：

好的，把我的评论变成答案：

你打错了，你错过了第一次animate电话后的结束。

【讨论】：