为使用JavaScript刚加载的图像添加淡入效果

Question

我有以下javascript代码，每次用户将鼠标置于缩略图上方时，该图像都会将div中的图像更改为另一图像。

我的问题是，如何应用淡入效果以使图像变化更好？

谢谢

JS：

$('#thumbs').delegate('img', {
mouseover: function(){
    $('.mainImage').attr('src',$(this).attr('src').replace('thumb','image'));
    var $this = $(this),
    index = $this.index();
    $("#thumbs img").removeClass('thumbSelected');
        $this.addClass('thumbSelected');
}});

PHP：

<div id="thumbs">
<img class="thumbSelected" src="http://www.tahara.es/images/<?php echo $row2[thumb1]; ?>.jpg"  /><br />
<img src="http://www.tahara.es/images/<?php echo $row2[thumb2]; ?>.jpg"  /><br />
<img src="http://www.tahara.es/images/<?php echo $row2[thumb3]; ?>.jpg"  />
</div>


<div class="mainImage magnify">
<div class="large"></div><a href="http://www.tahara.es/images/<?php echo $row2[image1]; ?>.jpg" rel="lightbox" title="<?php echo $row2[name]; ?>">
<img class="mainImage small" src="http://www.tahara.es/images/<?php echo $row2[image1]; ?>.jpg" />
</a>
</div>

Answer 1

在您的示例中，我相信：

$('#big-image img').fadeIn(300);

将工作。

如果没有，那就是：

$('#imgid').fadeIn(300);

要么：

$('#.classname').fadeIn(300);

Answer 2

看看jQuery的动画.. http://api.jquery.com/animate/您可以配置时间，宽松政策（这是你可能错过了什么），并完成回呼（添加一个额外的动画第一完成增加等不透明度时从.8到1）

实际上，这取决于您希望它的外观如何，但是动画效果比fadeIn效果更好