我制作了一些简单的图像滑块。我有小图像列表,每当单击其中一个时,我都会将目标大图像的源替换为单击(+一些操作src
从服务器获取更大的图像)。
现在我想在小图像上单击以淡出大图像,并在加载新图像时将其淡入。
尝试使用此代码:
ul.find('img').click(function() {
$('#big_image')
.fadeOut()
.attr('src', this.src.replace('/small/', '/big/')) // Some other src
.load(function() {
$(this).fadeIn();
});
});
这样做的问题是,当浏览器缓存图像时,onclick 图像会立即加载,然后淡入淡出,看起来有点烦人。
这个:
ul.find('img').click(function() {
$('#big_image')
.load(function() {
$(this).fadeIn();
})
.attr('src', this.src.replace('/small/', '/big/'))
.load(function() {
$(this).fadeIn();
});
});
完全不褪色。
任何想法?