使用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

我将元素绝对放在父容器中。边缘将总是推动兄弟元素，这就是为什么它会消失。也改变了悬停到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>

希望这足以让你开始。