1

mouseenterでjQuery-UI効果を1回だけトリガーする方法は？

http://jsfiddle.net/MG4JZ/

$('#menu a').hover(
  function() {
    $(this).css({
        'background-color': 'white',
        'color': 'black',
    }).effect('slide'); // EFFECT
  }, function() {
    $(this).css({
        'background': 'none',
        'color': 'white',
    });
});

マウスがオーバーしている間、それは永遠に動き続けます。

4

2 に答える 2

2

問題は<a>、左からスライドインして 2 番目の.hover()イベントを取得するために使用されているスライド効果です。position:relative要素がアニメーション化されているときに要素が jQueryUI から得られるという事実を利用して、エフェクトを追加するかどうかを決定します。

デモ

CSS の追加

#menu a:hover {
    background-color:white;
    color:black;
}​

そして単に使用する.mouseenter()

$('#menu a').mouseenter(function() {
    var $this = $(this);
    if ($this.css('position') === 'relative') return;
    $(this).effect('slide'); // EFFECT
});​

私のためにそれを解決するようです。

編集：右端にカーソルを合わせると、イベントがまだ複数回発生することを指摘してくれたコメントのマシューに感謝します。したがって、ここに更新された回答があります。新しい jQuery.on()構文を使用していますが、古い方法を使用して同じ結果を得ることができます。2 つのイベントを使用するようになりました。1 つはアンカーでホバースタイルと効果を追加しますが、アンカーに入ったときに要素がまだクラスを持っていない場合に限ります。また、アンカーをホバリングするときに、他のすべてのアンカーからホバー クラスを削除します。2 番目のイベントは、メニュー全体を終了するときの hover クラスの削除をカバーしています。この 2 番目のイベントがないと、メニューから離れるときにホバリングした最後のアンカーが.hoverクラスに残されます。

更新されたデモ

JavaScript

var $anchors = $('#menu a');

$('#menu').on('mouseenter', 'a', function() {
    $anchors.not(this).removeClass('hover');

    var $this = $(this);
    if ($this.hasClass('hover')) return;
    $this.addClass('hover').effect('slide'); // EFFECT
});

$('#menu').on('mouseleave', function() {
    $anchors.removeClass('hover');
});​

CSS

#menu {
    background-color: black;
}

#menu a {
    display: block;
    color: white;
}

#menu a.hover {
    background-color:white;
    color:black;
}​

HTML

<div id="menu">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>

お役に立てれば。

于 2012-10-27T07:57:14.337 に答える
0

これを試してくださいhttp://jsfiddle.net/MG4JZ/6/

$("#menu a").mouseenter(function(){
   $(this).css({
      'background-color': 'white',
      'color': 'black',
    }).stop(true,true).effect('slide');
}).mouseleave(function(){
   $(this).css({
    'background': 'none',
    'color': 'white',
   });
});

また

$("#menu a").hover(function(){
   $(this).css({
      'background-color': 'white',
      'color': 'black',
    }).stop(true,true).effect('slide');
},function(){
   $(this).css({
    'background': 'none',
    'color': 'white',
   });
});

</p>

于 2012-10-27T07:41:15.807 に答える