Javascript 在脚本中淡出不会'；t淡出当前图像_Javascript_Jquery

Javascript 在脚本中淡出不会'；t淡出当前图像

javascript jquery

Javascript 在脚本中淡出不会'；t淡出当前图像,javascript,jquery,Javascript,Jquery,我有一个脚本，当访问者点击缩略图时，它会在主图像中淡出。但是，主图像从白色背景淡入，我希望当前图像淡出，然后新图像淡入这是否可能与我的脚本下面提前感谢, <!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="UTF-8" /> <title>A Simple jQuery Fade In/Fade Out</title> <styl

我有一个脚本，当访问者点击缩略图时，它会在主图像中淡出。但是，主图像从白色背景淡入，我希望当前图像淡出，然后新图像淡入

这是否可能与我的脚本下面

提前感谢,

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>A Simple jQuery Fade In/Fade Out</title>

<style>
#imageWrap { 
width: 640px; 
height: 420px; 
}
</style>

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript">    </script>

<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
    $('#mainImage').hide();
    var i = $('<img />').attr('src',this.href).load(function() {
        $('#mainImage').attr('src', i.attr('src'));
        $('#imageWrap').css('background-image', 'none');
        $('#mainImage').fadeIn(1000);
    });
    return false; 
});
});
</script>

</head>
<body>

<a href="dimming/1.jpg" class="thumbnail"><img src="dimming/1.jpg" 
  alt="Image 1" width="20" height="20"/></a>
<a href="dimming/2.jpg" class="thumbnail"><img src="dimming/1.jpg" 
  alt="Thumbnail 2" width="20" height="20"/></a>

<div id="imageWrap">
<img src="dimming/C.jpg" alt="Main Image" id="mainImage"/>
</div>

</body>
</html>


一个简单的jQuery淡入/淡出
#图像包裹{
宽度：640px；
高度：420px；
}
$（文档）.ready（函数（）{
$（'.thumbnail'）.live（“单击”，函数（）{
$（'#main image'）.hide（）；
变量i=$（'

试试这个-

var i = $('<img />').attr('src',this.href).load(function() {
    $('#mainImage').fadeOut(1000,function(){  // fade out your main image first
       $('#mainImage').attr('src', i.attr('src'));
       $('#imageWrap').css('background-image', 'none');
       $('#mainImage').fadeIn(1000);  // fade in after your previous image is fadaOut
    });
});

var i=$（“那不起作用，它仍然会以白色背景淡入。我是否在其中保留“return false；”位？使用和不使用都不起作用。如果删除这一行$（“#imageWrap”）.css（'background-image'，'none'）
如果您创建一个JSFIDLE来显示正在进行的操作，那就太好了。等等，我创建了FIDLE…看看这是否是您想要的-好的，这似乎接近您想要的。。