Question

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

我的脚本可以在下面吗？

提前致谢，

<!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>

Answer 1

试试这个 -

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
    });
});

淡入脚本不会淡出当前图像

1 个答案: