1

如何在 mouseenter 上仅触发一次 jQuery-UI 效果？

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>幻灯片从左侧滑入并获得第二个.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
});​

似乎为我解决了。

编辑：感谢 Matthew 在评论中指出，当悬停在最右边时，事件仍然会触发多次。所以这是一个更新的答案。它使用较新的 jQuery.on()语法，但您仍然可以使用较旧的方法来获得相同的结果。它现在使用两个事件，一个在锚点上添加悬停样式和效果，但前提是在进入锚点时，元素还没有类。悬停锚点时，我还会从所有其他锚点中删除悬停类。第二个事件涉及在退出整个菜单时删除悬停类。如果没有第二个事件，则离开菜单时悬停的最后一个锚点将留在.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 回答