Javascript 将光标悬停在堆叠的图像上

我有多个图像是堆叠在一起的。在每个图像上

悬停

我将图像向左移动以显示整个图像。
我的问题是，我有

悬停

冲突，因为在多个图像上有

悬停

，所以有时会触发多个

悬停

s，或者在图像返回到第一个状态之前，另一个

悬停

会触发类似的错误。
我是否可以在当前工作时（在我的情况下，图像恢复到原始状态时），以某种方式使其平稳运行，而不触发另一个

悬停

我的HTML：

<div class="deck-container">
    <ul>
        <li>
            <img class="img-responsive" src="http://placehold.it/100x200" >
        </li>
        <li>
            <img class="img-responsive" src="http://placehold.it/100x200" >
        </li>
        <li>
            <img class="img-responsive" src="http://placehold.it/100x200" >
        </li>
        <li>
            <img class="img-responsive" src="http://placehold.it/100x200" >
        </li>
    </ul>
</div>

---

下面是我的例子。

我知道这对你来说可能不是正确的答案，但对我来说，这并不意味着卡是如何滑出的，因为当卡滑到左边时，你松开了鼠标

此外，您还将css转换与jQuery混合，这会导致糟糕的动画效果

所以我举了一个例子来说明如何产生效果，这可能会更好。或者你可以试着改变你喜欢的方式

这里是小提琴：

---

像这样？为你的问题编一把小提琴

var $holder = $('div.deck-container');
var $cards = $('div.deck-container li');

$holder.on("mouseleave", resetAll);
$cards.on("mouseenter", function(e){
    var $this = $(this);  
    resetOther($this);
    $this.stop().animate({'margin-right': 78});
});

function resetOther(card){
    $cards.not(card).each(function(){
        var $this = $(this);
        $this.stop().animate({'margin-right': 0});
    });
}
function resetAll(){
    $cards.each(function(){
        var $this = $(this);
        $this.stop().animate({'margin-right': 0});
    });
}