jquery - ホバーと clearQueue で画像を拡大

Question

次の質問に出くわしました。これは、1つのことを除いて必要なものです。

divボックス内のコンテンツが画像に添付された状態でホバーすると画像が拡大します

ベストアンサーの例: http://demo.superdit.com/jquery/zoom_hover/

マウスオーバーしてから数回マウスアウトすると、マウスが離された後もアニメーションが数回再生され続けます。

ギザギザの動きなしで、マウスアウト後にアニメーションを1回だけ再生するにはどうすればよいですか?

ありがとう。

Answer 1

以下は作業コードです。

$(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()的に動かせるようにしました (停止可能にします)。