jquery - 持続的なハイライト

Question

jqueryを使用してdomオブジェクトを強調表示したいと思います。effect私はjqueryuiから使用する方法を見つけました：

$('#foo').hover(function(){$('#bar').effect("highlight");});

ただし、これは、マウスがに移動した場合にのみ有効になり#fooます。マウスがオーバーしている間も効果を持続させ#foo、マウスが離れる前に戻してほしい。私が試した、これ：

$('#foo').mouseover(function(){$('#bar').effect("highlight");});

しかし、それでも機能しません。どうすれば効果を持続させることができますか？

Answer 1

とを使用mouseenterしmouseleaveて効果を追加し、要素にクラスを追加できます。サンプル：HTML：

<div id="foo">
    <p>Hello world</p>
</div>

JS：

$('#foo').mouseenter(function(){$(this).addClass("highlight");});
$('#foo').mouseleave(function(){$(this).removeClass("highlight");});

CSS：

.highlight{
    background-color: red;
}

フィドラー： http： //jsfiddle.net/2CL7u/

次のように、純粋なHTMLとCSSを使用してこの効果を作成することもできます。HTML：

<div id="foo">
    <p>Hello world</p>
</div>

CSS：

#foo:hover{
    background-color: red;
}

フィドラー： http： //jsfiddle.net/7Qq7n/

Answer 2

animation色を変更するときに、UIの色転送アニメーションを保存するために使用することもできます。

$('#foo').mouseover(function(){
    $(this).animate({
        backgroundColor: "#ffff99"
    },'fast');
});

$('#foo').mouseleave(function(){
    $(this).animate({
        backgroundColor: "#ffffff"
    },'fast');
});

JS FIDDLE

jqUIカラーアニメーションデモ

Answer 3

オン/オフを切り替える間隔（setTimeoutを使用）が必要です

 var hInterval = null;

 $('#foo').on({
   'mouseenter': function(){
      hInterval = setTimeout(function highlight(){
        $('#bar').effect("highlight", function(){ hInterval = setTimeout(highlight, 100); });
      }, 100);
   },
   'mouseleave': function(){
      clearTimeout(hInterval);
   }
 });