Анимируйте один Div, когда мышь наводится на другого

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

Следует отметить, что это можно сделать проще с помощью CSS, если задан порядок элементов DOM, но это решение не является гибким, если мыотделить элементы DOM.

Answer 2

Это также можно сделать без Javascript:

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

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

Демо

Answer 3

это то, что вы хотите? http://jsfiddle.net/4rnLp/7/