代码之家 › 专栏 › 技术社区 › Shlomi Komemi

悬停和清除队列时的图像放大

effects jquery

0

Shlomi Komemi · 技术社区 · 13 年前

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

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

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

当我在mouseover上,然后很快地将鼠标移出几次时,动画会在鼠标移出后继续播放几次。

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

谢谢

1 回复 | 直到 9 年前

1

Alexander 13 年前

下面是 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() (使其可以停止。)