CODEWITHSUNDEEP
jquerycsshoverjquery-animate
Flickdraw
Flickdraw

Reputation: 683

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?

Upvotes: 2

Views: 13506

Answers (3)

Enrique Moreno Tent
Enrique Moreno Tent

Reputation: 25277

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.

Upvotes: 4

bookcasey
bookcasey

Reputation: 40473

This can also be done without Javascript:

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

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

Demo

Upvotes: 3

Kishore
Kishore

Reputation: 1912

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

Upvotes: 0

Related Questions