当鼠标悬停在另一个时，将一个Div动画化 [英] Animate one Div when the mouse hovers over another

问题描述

当鼠标悬停在页面上其他位置的另一个div标签时，我正在查找动画一个div。作为示例...

I'm looking to animate one div when the mouse hovers over another div tag elsewhere on the page. As an example...

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 帮助。

如果鼠标悬停在鼠标上，蓝色的盒子？当鼠标移动离开蓝色框时，逆转动画？

How would I get the animation to trigger on the red box, whenever the mouse hovers over the blue box? And reverse the animation when the mouse is moved away from the blue box? Returning the red box to it's starting position.

有人可以帮助我吗？

推荐答案

这应该可以做到：

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

应该注意的是，使用CSS可以更容易做到这一点，但是如果我们分离DOM元素，那么该解决方案是不灵活的。

It should be noted that this can be done easier with CSS, in case the DOM order of the elements are given, but that solution is not flexible if we separate the DOM elements.

这篇关于当鼠标悬停在另一个时，将一个Div动画化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！