使用jquery動畫來移動容器中的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

我將元素完全放在父容器中。邊緣將永遠推動兄弟元素，這就是爲什麼它會消失。還將鼠標懸停在mouseenter和mouseleave上。

您也可以通過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> 

希望這足以讓你開始。