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

Answer 2

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

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

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

Demo

Answer 3

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

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

3 个答案: