訪問者がサムネイルをクリックするとメイン画像がフェードインするスクリプトがあります。ただし、メインの画像は白い背景からフェード インしているため、現在の画像をフェード アウトさせてから、新しい画像をフェード インさせたいと考えています。
これは、以下のスクリプトで可能ですか?
前もって感謝します、
<!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>