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的动画当鼠标悬停及移出

回答

相关问题