爲什麼mouseenter動畫會附着在孩子身上，而不僅僅是父母？

我有一個jQuery的動畫，由mouseenter在parent（）上觸發，但如果用戶在child（）上「擺動」鼠標，動畫會像在mouseout和mouseenter之間切換一樣閃爍。爲什麼mouseenter動畫會附着在孩子身上，而不僅僅是父母？

mouseenter在父級上被調用。爲什麼它也附着在孩子身上，我可以預防這種情況嗎？

例如：

http://jsfiddle.net/uqgz9/

我看着.stopImmediatePropagation（）;和.stopPropagation（）;我認爲這可能是正確的方向，但不能完全滿足我需要的交互。

謝謝。

來源

2012-08-05 dcp3450

使用.mouseleave()代替.mouseout()

http://jsfiddle.net/uqgz9/4/

var imgW; 

$('.brand-box-item').mouseenter(function(){ 
    if($(this).find('img').is(':animated') === false) 
     imgW = $(this).find('img').width();   
    $(this).find('img').stop().animate({'width':'0','margin-left':(imgW/2)+'px'},function(){ 
     $(this).css({'margin-top':'-40px'}); 
     $(this).stop().animate({'width':imgW+'px','margin-left':'0'}); 
    }); 
}); 

$('.brand-box-item').mouseleave(function(){ 
    $(this).find('img').stop().animate({'width':'0','margin-left':(imgW/2)+'px'},function(){ 
     $(this).css({'margin-top':'0'}); 
     $(this).animate({'width':imgW+'px','margin-left':'0'}); 
    }); 
});

「MouseLeave事件從鼠標移開的不同之處它處理事件冒泡的方式。如果鼠標移出，在此例子中使用，那麼當鼠標指針移出Inner元素時，處理程序將被觸發，這通常是不受歡迎的行爲，另一方面，mouseleave事件只在鼠標離開綁定的元素時觸發其處理程序，而不是後代。例如，手柄當鼠標離開外部元素時觸發er，但不是內部元素。「 -jQuery文檔

來源

2012-08-05 23:51:21 nbrooks

完美測試！我知道這是一件小事。代碼主演的影響太長了。大聲笑 – dcp3450 2012-08-06 00:24:11

@ dcp3450沒問題。另外，由於您確實需要懸停的處理程序，因此jQuery具有以下兩個快捷方式的功能：http://api.jquery.com/hover/ – nbrooks 2012-08-06 01:08:02

如果您將此代碼添加到您的活動，停止時如果目標元素是沒有選擇的一部分：

if (!$(e.target).is(this)) { 
    return false; 
}

演示：http://jsfiddle.net/uqgz9/3/

事件仍是起火原因鼠標經過父元素的邊界，這會很快觸發事件。

來源

2012-08-05 23:49:42 Blender

什麼@nbrooks說，在接受的答案，加上代碼將簡化如下：

$('.brand-box-item').on('mouseenter mouseleave', function() { 
    var imgW, 
     $img = $(this).find('img'); 
    if (!$img.is(':animated')) { 
     imgW = $img.width(); 
     $img.stop().animate({ 
      'width': 0, 
      'margin-left': imgW/2 
     }, function() { 
      $img.css({ 
       'margin-top': -40 
      }).stop().animate({ 
       'width': imgW, 
       'margin-left': 0 
      }); 
     }); 
    } 
});

DEMO

在IE9和Opera 12.01

來源

2012-08-06 00:48:24

爲什麼mouseenter動畫會附着在孩子身上，而不僅僅是父母？

回答

相關問題