Изменение позиции нескольких изображений, когда один из них завис.

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'}); 
});