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 でデバッグしているときに、奇妙なことに気付きました。1 つの要素にカーソルを合わせて 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 に答える