Question

$(document).ready(function(){
    $("#menu a").hover(function(){
        $(this).animate({opacity: 0.25}, function(){
            $(this).animate({opacity: 1});
        });
    });
});

我将此效果应用到我的菜单中，因此当鼠标越过链接时会显示此淡入淡出效果，但当鼠标从中释放时，效果会再次播放。不应该。它只应该在鼠标悬停在链接上时播放一次，而不是在鼠标离开时再播放一次。

Answer 1

.hover()有两个回调，一个用于mouseenter，另一个用于mouseleave。

使用mouseenter：

可能会更好

$(document).ready(function(){
    $("#menu a").mouseenter(function() {
        $(this).animate({opacity: 0.25}, function(){
            $(this).animate({opacity: 1});
        });
    });
});

Answer 2

使用 jQuery v1.7

尝试此操作

$('#menu a').on({
    mouseover: function() {
        event.preventDefault();
        $(this).animate({opacity: 0.25});
    },
    mouseout: function() {
        event.preventDefault();
        $(this).animate({opacity: 1});
    }
});

working DEMO

Answer 3

试试这个。在hoverout事件

上添加$（this）.stop（）

   $(document).ready(function () {
            $("#menu a").hover(function () {
                $(this).animate({ opacity: 0.25 }, function () {
                    $(this).animate({ opacity: 1 });
                });
            }, function () { $(this).stop(); });
        });

Answer 4

尝试：


$("#menu a").hover(
  function () {
    $(this).animate({opacity: 0.25}, function(){
            $(this).animate({opacity: 1});
        });
  }, 
  function () {
    //do nothing
  }
);

Answer 5

你必须检查它是否得到相同的对象

示例：

$('#updateCart').on('mouseenter', function (event) {
        if (event.handled !== true) { .....
                  //Put your code in here
          }
}

Answer 6

如果您想在悬停时触发一次，请改用mouseenter：

$("element").mouseenter(function(){
    //event here
});

悬停事件在jQuery中触发两次（在进入和离开时）？

6 个答案: