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);
});

Answer 2

问题在于，当您快速悬停时，您的值current_h和current_w不会衡量原始的高度和宽度，但当前的高度和宽度。因此，每次，你都在增加价值。

解决方案

我在这里使用了一个简单的.each()函数将每个图像的原始高度和宽度设置为数据属性，然后在设置current_h和current_w时可以访问这些属性。

$('img').each(function(i, el) {
    $(el).attr({
         "data-original-width": $(this).width(), 
         "data-original-height": $(this).height()
    });
});

current_h = $(this).attr("data-original-height");
current_w = $(this).attr("data-original-width");

的 WORKING FIDDLE 的

您不必使用每个功能。如果在渲染之前知道图像的高度和宽度，则可以在HTML中将它们设置为数据属性

jquery图像悬停在我悬停的同时不断增长

2 个答案:

解决方案