如何使用jQuery平滑过渡加载不同的图像？

Question

这是我的布局：

• 我的目标是在点击btn View All Students时加载差异图像。
• Ratherthan，一路上闪现一个新形象，我希望它有一个平稳的过渡。 当我更改src属性时。
• 我尝试使用$('img #bot-image-path ').slideDown(1000);，但这似乎没有任何效果。

我如何在jQuery中实现类似的功能？

这是我的实时结果：Fiddle

Answer 1

也许使用以下内容？

[selector].show( speed, [callback] );

这会在“速度”ms上淡入图像。回调不是必要的。您可以在此处详细了解http://www.tutorialspoint.com/jquery/jquery-effects.htm。

编辑：此外，删除实际div id前面的'img'可能会有所帮助！

Answer 2

I tried using $('img #bot-image-path ').slideDown(1000);, but that doesn't seem to take any effect.

$('img #bot-image-path ')将在窗口中的任何图片中选择ID为#bot-image-path的div，这将是无效的html。你可能只是指$('#bot-image-path')

而不是滑动......你可以用一个简单的例子（点击猫）异步地淡化2张图像：

JSFiddle