CODEWITHSUNDEEP
javascriptjquery
Darren Riches
Darren Riches

Reputation: 149

Fading in script doesn't fade out the current image

I have a script which fades in a main image when the visitor clicks on the thumbnail. However, the main image is fading in from a white background and I would like the current image to fade out and then the new image to fade in.

Is this possible with my script below?

Thanks in advance,

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

Upvotes: 0

Views: 175

Answers (1)

Adil Shaikh
Adil Shaikh

Reputation: 44740

Try this -

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

Upvotes: 1

Related Questions