2012-01-05 75 views
9
$(document).ready(function(){ 
    $("#menu a").hover(function(){ 
     $(this).animate({opacity: 0.25}, function(){ 
      $(this).animate({opacity: 1}); 
     }); 
    }); 
}); 

我將這個效果應用到我的菜單中,所以當鼠標移過鏈接時它會顯示淡入淡出效果,但是當鼠標從中釋放時,效果會再次播放。它不應該。當鼠標在鏈接上,而不是當鼠標離開另一個時間應該只玩一次。懸停事件觸發兩次(在進入和離開)jQuery中?

回答

16

.hover()有兩個回調,一個用於mouseover,另一個用於mouseout

你可能有mouseover更好:

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

jQuery的'.hover()'事件句柄'mouseenter'和'mouseleave',不'mouseover'和'mouseout'。 – Gavin 2016-02-15 11:54:23

+1

當前方法是使用['''。對( 「鼠標懸停」)'''](http://api.jquery.com/on/) – developius 2016-06-07 12:17:32

+0

@developius:'.mouseover()'是'的快捷方式。對(「鼠標懸停」)' – Blender 2016-06-07 13:12:05

1

嘗試:

 

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

 
2

嘗試。在hoverout事件添加$(本).stop()

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

嘗試這與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

+0

真的很好的答案 – 2012-01-05 07:51:16

0

你必須檢查它,你會得到相同的對象或不是

例如:

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