javascript - jquery 图像悬停在我悬停时不断增长

Question

我有这种奇怪的行为 当我在图像上缓慢悬停时，一切正常，图像变大，悬停时图像缩小。

但是当我快速重复悬停时，图像会不断增长，并且位置会根据悬停速度而变化

请参阅fiddle

Jquery

   $(document).ready(function () {
    var cont_left = $("#container").position().left;
    $("a img").hover(function () {
        // hover in
        $(this).parent().parent().css("z-index", 1);
        current_h = $(this, 'img')[0].height;
        current_w = $(this, 'img')[0].width;
        $(this).stop(true, false).animate({
            width: (current_w * 1.3),
            height: (current_h * 1.3),
            left: "-=50",
            top: "-=50"
        }, 300);
    }, function () {

        // hover out
        $(this).parent().parent().css("z-index", 0);
        $(this).stop(true, false).animate({
            width: current_w + 'px',
            height: current_h + 'px',
            left: "+=50",
            top: "+=50"
        }, 300);
    });

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

请告知如何修复图像的增长和位置。 P.S:每张图片都有不同的尺寸

Answer 1

这些行是问题的关键:

    current_h = $(this, 'img')[0].height;
    current_w = $(this, 'img')[0].width;

当您.stop 图像增长动画时，它不会收缩回其原始大小(除非您将 its second param 设置为 true - 但您指定false 明确地，我假设你知道你在这里做什么)。所以两个维度实际上都设置为增加的值。

解决方案很简单:始终使用图像的原始大小:

$(document).ready(function () {
    var current_h, current_w;
    // ... 
    current_h = current_h || $(this, 'img')[0].height;
    current_w = current_w || $(this, 'img')[0].width;

JS Fiddle .

---

这里有两个旁注。首先，这些元素的定位存在类似的问题:移动太快，图像将移动到左上角或右下角(取决于相位)；那是因为，动画是针对事物的当前状态完成的，这与使用 .stop(true, false) 停止前一个动画时的原始状态不同.

其次，在这种情况下使用 $(this, 'img')[0] 本质上与仅使用 this 相同。请记住，在事件处理程序中，this 对应于分配了此事件处理程序的 DOM 元素。

所以这是可以做到的(demo):

$("a img").hover(function() {
    var $this = $(this);
    $this.closest('.img').css('z-index', 1);

    var orig = $this.data('orig');
    if (!orig) { // caching the original sizes via `jQuery.data`
        orig = {
            width: this.width,
            height: this.height
        };
        $this.data('orig', orig);
    }
    $this.stop(true, false).animate({
        width: orig.width * 1.3,
        height: orig.height * 1.3,
        left: -(orig.width * 0.3 / 2),
        top: -(orig.height * 0.3 / 2)
    }, 300);
}, function () {
    var $this = $(this),
        orig = $this.data('orig');
    if (!orig) {
        return false;
        // actually, it should never be here, 
        // as calling 'mouseleave' without data precached 
        // means 'mouseenter' has been never called
    }
    $this.closest('.img').css('z-index', 0);
    $this.stop(true, false).animate({
        width: orig.width,
        height: orig.height,
        left: 0,
        top: 0
    }, 300);
});