在鼠标悬停时动画边距并在没有鼠标悬停的情况下动画返回答案

【问题标题】：on mouseover animate margin and animate back without mouseout在鼠标悬停时动画边距并在没有鼠标悬停的情况下动画返回
【发布时间】：2012-07-03 22:29:02
【问题描述】：

我试图在鼠标悬停时为图像设置动画，我希望它在不使用鼠标悬停的情况下动画回到正常位置。

       $(document).ready(function() {
$("#bysti-menu li").mouseover(function(){

                var $elem = $(this);
                $elem.find('.uprmenuicon')
                      .animate({
                        'margin-top':'-40px'

                     },400,'easeOutBack').animate({
                        'margin-top':'0px'

                     },400,'easeOutBack')
}).mouseout(function(){
  // do nothing
});

});

在这里，当我将鼠标悬停在图像上时，它的边距变为-40px，但我希望它在此之后立即变为正常为 0px，即使鼠标还没有出来？任何人都可以帮助我吗？

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

您可以设置函数来监听正在发生的事件类型：http://jsfiddle.net/dn9wD/1/

【讨论】：

好吧，这个工作正常，但我的图像反弹了很多次，这是因为我有 6 个相同类别的图像吗？任何 sol 都可以
在持续时间后添加queue: false
感谢它完成了一点工作，但仍然假设图像的宽度为 60px，并且我的鼠标位于图像的左侧。当我将它悬停在左侧时，它会像我想要的那样动画和停止，但是如果我的鼠标向右移动一点，它会再次开始动画吗？为什么这样？我已经接受了这个答案，因为它有很大的帮助谢谢你
没问题，很高兴能帮上忙！您是否尝试将其设置为仅动画一次？还是你想降低悬停区域的灵敏度？
您可以考虑使用带有变量的 setTimeout() 作为某种临时关闭开关，试一试，但如果您对此有疑问，我会将其作为单独的问题发布。跨度>

【解决方案2】：

jquery .animate() 有一个“完成”参数，一旦动画完成就会被调用。查看文档here。

【讨论】：

我有，但仍然无法正常工作，我希望高度回到 0px 没有鼠标移出
嗨，我认为 .stop 会停止动画，请参阅下面的演示 :)

【解决方案3】：

示例演示 http://jsfiddle.net/R4bzf/（行为：将鼠标拖到黄色/橙色面板上，然后鼠标移出）

API .stop 可以解决问题http://api.jquery.com/stop/

希望对您有所帮助，如果我遗漏了什么，请告诉我，谢谢

代码

$(this).stop() // Do whatever - .animate({ left: "-270" }, 500);

【讨论】：

朋友感谢 jsfiddle 示例。但是你看到当我移动那个 div 的鼠标然后恢复正常。我希望它像左一样动画一次：“-270”，同时自动返回到 0px，而无需我将鼠标移出该 div。
@SakshiSharma Hiya :) ummmm，你能不能看一个示例演示，我也许可以帮助你，谢谢，
好吧@eivers88 让它按我想要的方式工作，但是对于同一类的 6 个图像，它的动画图像不止一次，鼠标悬停在任何溶胶上
@SakshiSharma 别担心，B-) 再见！