Использование Jquery Animate для перемещения 2 элементов в контейнере

Question

Я пытаюсь переместить два блока одновременно в контейнере при наведении курсора, а затем отключить его, чтобы сохранить его в исходное состояние. Когда это было предпринято, это было безуспешно. Я надеялся на небольшую помощь в этом. Вот пример этого:

var container = $('#blockcontainer'); 
var container2 = $('#blockcontainer .block1'); 
var container3 = $('#blockcontainer .block2'); 
container.hover(function(){ 
    container3.animate({marginTop: '-100'}, 1000); 
container2.animate({marginTop: '100'}, 1000); 
}); 

http://jsfiddle.net/gy9py/

бы по достоинству оценить помощь.

Answer 1

Я позиционировал элементы абсолютно внутри родительского контейнера. Поля всегда будут выталкивать элемент брата, поэтому он исчезнет. Также был изменен курсор мыши на мышь и мышь.

Вы также можете добиться эффекта с переходами CSS3.

http://jsfiddle.net/gy9py/3/

<script> 
container.on({ 
    'mouseenter': function(){ 
     container3.stop().animate({top: '0'}, 1000); 
     container2.stop().animate({top: '100px'}, 1000); 
    }, 
    'mouseleave': function(){ 
     container3.stop().animate({top: '100px'}, 1000); 
     container2.stop().animate({top: '0'}, 1000); 
    } 
}); 
</script> 

Надеется, что этого достаточно, чтобы вы начали.