jQuery的動畫當鼠標懸停及移出

我有以下的代碼，鼠標懸停移動的DIV block 20像素下來：jQuery的動畫當鼠標懸停及移出

$('.outerDiv').mouseover(function() 
{  
    $(this).animate({marginTop: "+=20px",},500); 
}); 

$('.outerDiv').mouseout(function() 
{  
    $(this).animate({marginTop: "-=20px",},500); 
});

的div包含另一個div內。問題是，當鼠標在內部div上時，出現鼠標移出事件，並且div塊向上移動20px。我想知道是否有辦法只發生鼠標事件，如果鼠標只在外部div之外。

下面是HTML結構：

<div class='outerDiv'> 
    <div class='innerDiv'> 
     bla bla bla 
    </div> 
</div>

來源

2012-02-08 Эџad Дьdulяңмaи

後的HTML結構，它會更清楚 – MichaelS 2012-02-08 20:22:11

你有後'= 20px的一個額外的逗號」，' – 2012-02-08 20:36:39

您需要使用mouseenter和mouseleave代替鼠標懸停及移出的子元素這會泡到父時觸發的。

下面是摘自docs。

鼠標懸停的火災時，將指針移動到子元素，以及，只有而火災的mouseenter當指針移動到綁定元件。

此外，通過j08691的建議，你可能只是想利用.hover因爲這種方法結合處理兩種的mouseenter和鼠標離開事件。

來源

2012-02-08 20:24:02

你不是故意的mouseenter和mouseleave？我也使用hover（）代替。 – j08691 2012-02-08 20:28:25

試試這個：

var baseMargin = 20; 

$('.item').hover(function() { 
    $(this).stop().animate({marginTop: (baseMargin+20)+'px'}, 500); 
}, 
function() { 
    $(this).stop().animate({marginTop: (baseMargin-20)+'px'}, 500);     
});

例子：http://jsfiddle.net/bKc47/1/

來源

2012-02-08 20:30:02 czerasz

您的代碼無效。「 - = 20px」，} schoud be「 - = 20px」} – czerasz 2012-02-08 20:30:52

jQuery的動畫當鼠標懸停及移出

回答

相關問題