图像改变onHover jquery

Question

当鼠标悬停在image.Me上时，我需要更改多个图像尝试一个但它只更改一个图像如何才能在image.My上更改多个图像尝试fiddle

HTML：

<div id="container">
<div class="fimg"><a href="#"><img height="130px" width="100%" src="a.jpg" alt="" /></a>
</div> <div class="simg"> 
<a href="#"><img height="130px" width="100%" src="A.jpg" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p></a>
</div>

Javascript：

 $(function(){
    $("#container").hover(function(){
        $("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
    }, function() {
        $("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
    });
});

Answer 1

如果我正确理解了您的问题，当您将鼠标悬停在container上时，您想要一个图像滑块。

图像在内联块中，如果它们被设置为white-space: nowrap。所以它们不会被包裹起来。如果将container设置为overflow: hidden，则会隐藏额外的图像。

这些图像通过设置内部div的margin-left动画来显示。因此，这就像是内部容器在移动，但容器保持不动。

你可以随心所欲地修改它，垂直动画，使用css过渡和其他东西。

我不能在这里张贴代码，因为图像的网址缩短了。

你可以测试和修改它，here，它是一支钢笔。