Question

我有一个功能，我用鼠标输入缩放图片并在鼠标输出时恢复正常尺寸。问题是如果我快速鼠标移出然后鼠标进入允许图片恢复到正常大小之前，那么图片将从当前鼠标输入时的任何大小放大（x2.7）（并将不再恢复原来的大小）....所以它变得巨大！在img第一次恢复到原始大小之前，我将如何停止运行该函数？去vgtesting.co.nf（狗行走标签）看看我想做什么。

//to scale up on hover
$('#videoandmapwrap').on({
    mouseenter: function () {
        current_h = $(this, 'img')[0].height;
        current_w = $(this, 'img')[0].width;
        $(this).stop(true, false).animate({
            width: (current_w * 2.7),
            height: (current_h * 2.7)
        }, 900);
    },
    mouseleave: function () {
        $(this).stop(true, false).animate({
            width: current_w + 'px',
            height: current_h + 'px'
        }, 400);
    }
}, 'img');

Answer 1

你的问题是你有一个竞争条件，其中不同的事件处理程序相互竞争。修复此问题的一种方法是在第一次执行mouseenter时将原始大小存储在DOM中，然后在缩放时始终使用此大小，而不是使用图像的当前大小。

Answer 2

喜欢我的评论......

您的代码似乎有效。这两个变量只有一个。它们似乎没有被定义，如果变量没有被定义，它们的范围受限（mouseenter函数），而另一个则没有鼠标距离尝试全局定义值。

var current_h,current_w; //add this line simply.
$('#videoandmapwrap').on({
    mouseenter: function () {
       //... your code
    }
}, 'img');

示例：http://jsfiddle.net/Frogmouth/Ku2fH

Answer 3

使用允许大小的标志。当鼠标输入时 - 将标志设置为false并将其留下 - 确认。所以将皮特大小调整到旗帜。希望这会有所帮助。

var flag = true;
// inside mouseenter function
if(!flag) return;
flag = !flag;

// and then in mouseleave function
flag = !flag;

希望这足以让它回答。

jquery scale scale函数以指数方式增加大小

3 个答案: