Question

所以我有这段代码：

HTML

<p id="lorem">
    <span class="red" id="n01">L</span>
    <span class="red" id="n02">o</span>
    <span id="n03">r</span>
    <span id="n04">e</span>
    <span class="blue" id="n05">m</span> 
    <span id="n06">i</span>
    <span class="blue" id="n07">p</span>
    <span class="red" id="n08">s</span>
    <span id="n09">u</span>
    <span class="blue" id="n10">m</span>
</p>

<br />

<div id="bar-red"></div>
<div id="bar-blue"></div>

JS

function legend( elem ) {
    var timer;
    var k;
    var h = $( elem );

    if( elem == ".red" ) {
        k = $("#bar-red");
    }

    if( elem == ".blue" ) {
        k = $("#bar-blue");
    }

    h.hover(function() {
        console.log(h);
        if(timer) {
            clearTimeout(timer);
            timer = null
        }

        timer = setTimeout(function(){
            k.animate({width: "30px"}, 200);
        }, 300)
    },
    function(){
            k.animate({width: "10px"}, 200);
    });
}


legend(".blue");
legend(".red");

为了更好地理解这个问题，我还创建了一个Fiddle。当您将鼠标悬停在蓝色字母上并让鼠标在那里停留很短时间时，蓝色条会展开。红色字母和红色条也一样。问题是，有时是滞后，酒吧保持扩大或不会真正扩大。为什么会这样？

在我的制作环境中，我有大约150个字母，而且悬停基本上无法使用。或者这可能是因为我动态添加了类（不是在小提琴中）？

另外，在使用Firebug进行调试时，我注意到一些奇怪的事情。我将鼠标悬停在一个元素上并记录h，它显示了该类的所有元素。这就是为什么我认为我可能在这个函数中有某种逻辑错误。也许它会同时发射多次，这就是为什么它会滞后？

任何举行表示赞赏！

Answer 1

你不需要使用计时器来防止鼠标超过动画冲突，stop()方法就可以了。您也可以尝试停止（true，false）/ stop（false，true）来找到问题的最佳解决方案。

如果您坚持使用计时器，请检查我的答案的编辑版本。最后一个我用计时器做了。

Here is jsfiddle.

h.bind({
  mouseenter: function() {
     k.stop().animate({width: "30px"}, 200);
  },
  mouseleave:    function(){
     k.stop().animate({width: "10px"}, 200);
  }
});

Answer 2

试试这段代码，

 function legend( elem ) {
    var timer;
    var k;
    var h = $( elem );

    if( elem == ".red" ) {
        k = $("#bar-red");
    }

    if( elem == ".blue" ) {
        k = $("#bar-blue");
    }

    h.hover(function() {
        /*console.log(h);
        if(timer) {
            clearTimeout(timer);
            timer = null
        }*/
        k.stop().animate({width: "30px"}, 200);
       /* timer = setTimeout(function(){
            k.animate({width: "30px"}, 200);
        }, 300)*/
    },
    function(){
            k.stop().animate({width: "10px"}, 200);
    });
}


legend(".blue");
legend(".red");

JavaScript / jQuery悬停函数表现得很有趣 - 数组问题？

2 个答案: