当其中一个悬停时更改多个图像位置

Question

我有几张图片，当我将鼠标悬停在其中一张上时，我希望所有图片都改变位置。当图像改变位置时，还应该有一个动画，以便它们滑动到新位置。我正在使用 jQuery。我一直在尝试不同的解决方案，但没有任何效果，所以我没有发布任何 javascript。

HTML：

<div class="container">
    <div class="picture one"></div>
    <div class="picture two"></div>
    <div class="picture three"></div>
</div>

CSS

.container {
    position: relative;
}

.picture {
    width: 100px;
    height: 150px;
    background-color: green;
    border: 1px solid #ccc;
    position: absolute;
}

.two {
    left: 60px;
    top: 10px;
    z-index: 2;
}

.three {
    left: 35px;
    top: 50px;
    z-index: 1;
}

.three:hover {
    top: 0;
    left: 100px;
}

.two:hover {
    left: 0;
    top:0;
}

.one:hover {
    left: 200px;
}

链接到 jFiddle：http://jsfiddle.net/LJ9wL/2/

Answer 1

这会给你一个开始。 http://jsfiddle.net/LJ9wL/3/

$('.picture').on('mouseenter', function() {
    $('.picture').css({top: '0', left: '200px'});
    $(this).css({top: '60px', left: '20px'});
});

$('.picture').on('mouseleave', function() {
    $('.picture').css({top: '0', left: '200px'});
    $(this).css({top: '0', left: '200px'});
});