使用 Jquery Animate 移动容器中的 2 个项目答案

【问题标题】：Using Jquery Animate to Move 2 items in a container使用 Jquery Animate 移动容器中的 2 个项目
【发布时间】：2013-11-20 19:09:43
【问题描述】：

我正在尝试在悬停时在容器内同时移动两个块，然后在悬停时将其保留为原始状态。当尝试这样做时，它没有成功。我希望能得到一点帮助。这是一个例子：

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/

非常感谢您的帮助。

【问题讨论】：

你想用动画效果替换方块的位置吗？
是的，我是。我使用了 nanpx 示例，它似乎工作正常。

标签： javascript jquery user-interface jquery-animate toggle

【解决方案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>

希望这足以让您入门。

【讨论】：