悬停和clearQueue上的图像放大答案

【问题标题】：image enlarge on hover and clearQueue悬停和clearQueue上的图像放大
【发布时间】：2012-09-09 20:03:41
【问题描述】：

我遇到了以下问题，这几乎是我需要的，除了一件事。

image enlarge on hover with content inside div box attached to image

最佳答案示例： http://demo.superdit.com/jquery/zoom_hover/

当我在鼠标悬停然后鼠标移出几次非常快时，动画会在鼠标移出后继续播放几次。

如何在鼠标移出后动画只播放一次而不出现锯齿状移动？

谢谢。

【问题讨论】：

向我们展示相关代码。但我很确定它会是yet another question about .stop()
代码为示例：demo.superdit.com/jquery/zoom_hover
希望this对您有所帮助。必要时更改动画以强制执行.stop() 事件。根据您当前页面的样式，它不会对您产生太大影响
@Alexander 是的，这正是我需要的，谢谢！
那么让我把它作为答案

标签： jquery effects

【解决方案1】：

下面是working code。

$(document).ready(function() {
  var cont_left = $("#container").position().left;
  $("a img").each(function() {
    var $this = $(this);
    var left = $this.position().left, top = $this.position().top;
    $(this).hover(function() {
      // hover in
      $(this).parent().parent().css("z-index", 1);
      $(this).stop().animate({
        height: "250",
        width: "250",
        left: left - 50,
        top: top - 50
      }, "fast");
    }, function() {
      // hover out
      $(this).parent().parent().css("z-index", 0);
      $(this).stop().animate({
        height: "150",
        width: "150",
        left: left,
        top: top
      }, "fast");
    });
  });

  $(".img").each(function(index) {
    var left = (index * 160) + cont_left;
    $(this).css("left", left + "px");
  });
});

所做的更改：

已添加.stop()。
修复了动画的定位，使其与.stop() 相匹配（使其可停止。）

【讨论】：