为刚使用javascript加载的图像添加淡入效果 - Adding a fade in effect to an image just loaded using javascript

Adding a fade in effect to an image just loaded using javascript

我有以下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>

在您的示例中，我认为：

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

会起作用的。

如果不是，那只是：

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

或者：

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

查看Jquery animate。。http://api.jquery.com/animate/您可以配置持续时间、缓和（这可能是您所缺少的）和完成回调（在第一个动画完成时添加额外的动画，如将不透明度从.8增加到1）

这实际上是一个你希望它看起来如何的问题，但animate会比fadeIn 做得更好