jquery - 当鼠标悬停在另一个 Div 上时对一个 Div 进行动画处理

Question

当鼠标悬停在页面其他位置的另一个 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

<div id="blue-box"></div>
<div id="red-box"></div>

JavaScript

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

我还做了一个jsFiddle来帮忙。

每当鼠标悬停在蓝色框上时，如何让动画在红色框上触发？当鼠标移离蓝色框时反转动画？将红色框返回到其起始位置。

有人可以帮助我吗？

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 元素，该解决方案就不灵活。