1

所以我有这个代码：

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 个字母，并且悬停基本上无法使用。或者这可能是因为我动态添加了类（而不是在 Fiddle 中）？

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

任何举行表示赞赏！

4

2 回答 2

2

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

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

这是jsfiddle。

h.bind({
  mouseenter: function() {
     k.stop().animate({width: "30px"}, 200);
  },
  mouseleave:    function(){
     k.stop().animate({width: "10px"}, 200);
  }
});
于 2012-07-18T09:16:54.477 回答
1

试试这个代码，

 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");
于 2012-07-18T09:15:28.160 回答