javascript - 使div中的图像在鼠标悬停时以某种方式显示

我有问题，我想解决2天，但我不能坚持下去。
我有2个div，都是屏幕宽度的50％，并且里面有背景图片。
左边的div是一个像从他的手到屏幕一半爆炸的家伙，右边的也是另一个同样的家伙。
对于exp。我想如果我将鼠标悬停在div上，那爆炸将继续向右div（代表爆炸的图像）。我用这个

$(".left").hover(function(){
$(".left2").stop(true, false).animate({  width: "100%" }, 2000);
}, function() {
$(".left2").stop(true, false).animate({  width: "0%" }, 2000);
});

但是它可以使图像缩放。我只希望图像从左到右展开。不要将其滑动或从某个位置移出边缘，只是要展开即可。

如果有人可以帮助我，我将不胜感激！先感谢您！

最佳答案

您是否正在考虑这样的事情？

jsFiddle Demo

注意如何制作blast div position:absolute（实际上，我将它们全部设为绝对，但只需要blast），以便可以对left和top属性进行动画处理以创建运动。

HTML：

<div id="leftguy">
    <img src="http://placekitten.com/200/250" />
</div>
<div id="rightguy">
    <img src="http://placekitten.com/200/240" />
</div>
<div id="blast"></div>

jQuery的：

$('#leftguy').hover(
    function(){
        $('#blast').animate({
            'left' : '300px',
            'top'  : '100px'
        },1500);
    },
    function(){
        //do nothing on hoverOut
    }
);
$('#rightguy').hover(
    function(){
        $('#blast').animate({
            'left' : '0px',
            'top'  : '50px'
        },1500);
    },
    function(){
        //do nothing on hoverOut
    }
);

CSS：

div{position:absolute;}
#leftguy {}
#rightguy{left:300px;}
#blast{width:100px;height:100px;border-radius:50px;background:yellow;}