javascript - 使用多个 div 元素时创建增长/收缩计时器会中断

Question

我最近一直在玩 JavaScript 和 jQuery，我决定让 div 在鼠标进入 div 区域时变大，并在鼠标离开时缩小。当我只有一个 div 或一次只运行一个 div 时，它工作得很好，但如果我要离开一个区域，并在另一个区域完成收缩之前进入另一个区域，它就会崩溃。

这是我正在使用的 JS 和 jQuery 代码:

var timers = [];
var maxSize = 150;
var minSize = 100;
var step = 1;

function grow(element) {
    var size = element.width();
    if (size < maxSize) {
        var newSize = size + step;
        if (newSize > maxSize) newSize = maxSize;
        element.css('width', newSize);
        element.css('height', newSize);
    } else {
        window.clearInterval(timers[element]);
    }
}

function shrink(element) {
    var size = element.width();
    if (size > minSize) {
        var newSize = size - step;
        if (newSize < minSize) newSize = minSize;
        element.css('width', newSize);
        element.css('height', newSize);
    } else {
        window.clearInterval(timers[element]);
    }
}

function inArray(element, array) {
    if ($.inArray(element, array) > 1) return true;
    return false;
}

$("div").mouseover(function() {
    var element = $(this);
    if (inArray(element, timers)) window.clearInterval(timers[element]);
    else timers.push(element);

    timers[element] = window.setInterval(function() {
        grow(element);
    }, 0);
});

$("div").mouseleave(function() {
    var element = $(this);
    window.clearInterval(timers[element]);
    timers[element] = window.setInterval(function() {
        shrink(element);
    }, 0);
});

由于我已将元素放入数组中，因此它们不应该出现同时调整多个 div 大小的问题，而且我不确定我做错了什么。 (And here's a JSFiddle of it)

Answer 1

也许您只是在玩 JavaScript。但仅供记录，您可以通过几行 css 而不使用 javascript 来实现这一点:

div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    transition: .5s;
}
div:hover {
    width:150px;
    height:150px;
}

<div></div>
<div></div>
<div></div>