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

Question

我有问题，我想用 2 天的时间来解决，但我无法掌握它的窍门。 我有 2 个 div，都是 50% 的屏幕宽度，里面有背景图像。 在左边的 div 中是一个人在做着从他的手到屏幕的一半的爆炸，在右边也是不同的人在做同样的事情。 对于实验。我想如果我将鼠标悬停在左侧 div 上，该爆炸会继续向右 div(代表爆炸的图像)。我用过这个。

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

但是当它出现时它会使图像缩放。我只想让图像从左到右展开。不要滑动它或将其从某处边缘化，只是为了展开。

如果有人能帮助我，我将不胜感激!提前致谢!

Answer 1

你在想这样的事情吗？

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