当鼠标hover在另一个上时，动画一个Div

当鼠标hover在页面上其他地方的另一个div标签时，我正在寻找动画一个div。 举个例子…

CSS

#blue-box { position:absolute; margin-left:50px; margin-top:50px; height:100px; width:100px; background-color:blue; } #red-box { position:absolute; margin-left:180px; margin-top:50px; height:100px; width:100px; background-color:red; } 

HTML

JavaScript的

 $(document).ready(function(){ $('#red-box').animate({'margin-top': '200px'}, 1500); }); 

我也帮助了一个jsFiddle 。

只要鼠标hover在蓝框上，我怎么能在红框上触发动画？ 当鼠标移离蓝框时，反转动画？ 将红色框返回到它的起始位置。

谁能帮助我？

Answer 1

这应该是诀窍：

 $(document).ready(function(){ $("#blue-box").hover(function(){ $('#red-box').stop().animate({'margin-top': '200px'}, 1500); }, function(){ $('#red-box').stop().animate({'margin-top': '50px'}, 1500); }); }); 

应该注意的是，在给出元素的DOM顺序的情况下，使用CSS可以更容易地做到这一点，但是如果我们分离DOM元素，则该解决方案不灵活。

Answer 2

这也可以在没有Javascript的情况下完成：

 #red-box { ... transition:margin-top 2s ease-in; } #blue-box:hover + #red-box { margin-top:200px; } 

演示

Answer 3

这是你想要的吗？ http://jsfiddle.net/4rnLp/7/