1

i got this strange behaviour when i do a slow hover on image everything is working, the image grows and on hover out the image shrinks.

But when i repeat the hover fast the image keeps growing and growing and the position is changing according to the hover speed

Please see 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");
    });
});

Please advise how to i fix the image grow and position. P.S: every image has a different dimentions

4

2 回答 2

3

这些行是问题的关键：

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

当您.stop使用图像增长动画时，它不会缩小到其原始大小（除非您将其第二个参数设置为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小提琴。

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

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

所以这是可以做到的（演示）：

$("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);
});
于 2013-11-06T11:14:40.710 回答
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");

工作小提琴

不过，您不必使用 each 函数。如果您在渲染之前知道图像的高度和宽度，那么您可以在 HTML 中将它们设置为数据属性

于 2013-11-06T11:16:27.247 回答