当鼠标悬停在另一个 Div 上时为一个 Div 设置动画答案

【问题标题】：Animate one Div when the mouse hovers over another当鼠标悬停在另一个 Div 上时为一个 Div 设置动画
【发布时间】：2012-01-10 23:38:43
【问题描述】：

当鼠标悬停在页面其他地方的另一个 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 来提供帮助。

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

谁能帮帮我？

【问题讨论】：

标签： jquery css hover jquery-animate

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

【讨论】：

【解决方案2】：

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

#red-box {
    ...
    transition:margin-top 2s ease-in;
}

#blue-box:hover + #red-box {
    margin-top:200px;
}

Demo

【讨论】：

+1 用于提供 CSS3 替代方案。另外，我已对其进行了编辑，因为您两次声明了转换属性。
Flickdraw，您需要使用 -moz- 供应商前缀才能在 Firefox 中工作。这是带有所有供应商前缀的updated demo。
非常好，+1。让多浏览器和旧浏览器 (IE8 + IE7) 友好起来有多容易？
这是最佳答案，以防您要转换的 div 紧跟在触发效果的那个之后。遗憾的是，这个答案不是很灵活，如果 DOM 元素在 DOM 树中混杂一些，那么应该非常注意它的局限性。

【解决方案3】：

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

【讨论】：

当我将鼠标悬停在蓝色框上时，这不会为红色框设置动画，至少在 Firefox 中不会。
哦，对不起，我想我把盒子弄乱了，将鼠标悬停在红色盒子上它会为蓝色盒子设置动画。我猜你想要的恰恰相反。