0

これは私のサンプルコードです。以下に私の問題を説明します：

<script type="text/javascript" src="jquery.min-1.10.1.js"></script>
<script type="text/javascript" src="jquery.animate-colors.js"></script>
<script type="text/javascript">
$(function () {
  $("a").mouseover(function (){
        $("a").animate({color: "#eee"});
   });

 $("a").mouseleave(function () {
        $('a').animate({color: '#000'});
  });
});
</script>
<a href="javascript:;">Hover Me</a>

説明：

一度アイテムにカーソルを合わせると、マウスを通過するたびにこれが連続して実行され、アクションを実行している間は再度実行したくありません。これには何がお勧めできますか？

4

3 に答える 3

5

まず、イベントをチェーンして使用しon、次に追加し.stop(stop, stop)ます。

$(function () {
  $("a").on('mouseover', function (){
        $(this).stop(true, true).animate({color: "#eee"});
   }).on('mouseleave', function () {
        $(this).stop(true, true).animate({color: '#000'});
   });
});

デモ: http://jsfiddle.net/maniator/bktUt/

于 2013-07-26T13:20:50.283 に答える
0

あなたは mouseleave の正しい exit イベントを使用していますが、正しい enter イベントを使用していません。複数回起動しない mouseenter を使用する必要があります。

.mouseenter(ハンドラ(イベントオブジェクト))

説明:マウスが要素に入ったときに発生するイベント ハンドラーをバインドするか、要素でそのハンドラーをトリガーします。

また、ニールが指摘したように、ユーザーが要素を出入りするときに立ち去る/開くアニメーションが発生する場合は、停止も使用する必要があります。

于 2013-07-26T13:33:18.850 に答える