Animate one Div when the mouse hovers over another

问题

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);
});

I've also made a jsFiddle to help.

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.

Could anyone help me?

回答1:

This should do the trick:


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

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.

回答2:

This can also be done without Javascript:

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

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

Demo

回答3:

is this what you want? http://jsfiddle.net/4rnLp/7/

来源：https://stackoverflow.com/questions/8347905/animate-one-div-when-the-mouse-hovers-over-another

标签

jquery

css

hover

jquery-animate