I'm currently working on creating an image slider. When I click on a thumbnail above, I retrieve the source of that image and append it to the designated div to display as a larger image. While this functionality is working, I'd like to enhance it by adding a fade-in effect when appending the new image and have the previous one fade out when a new image is clicked. How can I accomplish this?
Image Slider:
<div id='main'>
<div class="thumbsImg">
<ul class="ulthumbs">
<li>
<img src="img/a1.jpg" width='150' height="80">
</li>
<li>
<img src="img/a2.jpg" width='150' height="80">
</li>
<li>
<img src="img/a3.jpeg" width='150' height="80">
</li>
<li>
<img src="img/a4.jpg" width='150' height="80">
</li>
<li>
<img src="img/a5.png" width='150' height="80">
</li>
<li>
<img src="img/a6.jpg" width='150' height="80">
</li>
<li>
<img src="img/a7.jpg" width='150' height="80">
</li>
<li>
<img src="img/a8.jpg" width='150' height="80">
</li>
<li>
<img src="img/a9.jpg" width='150' height="80">
</li>
</ul>
</div>
<div id='imgBody'></div>
</div>
CSS
.thumbsImg {
margin-left: auto;
margin-right: auto;
width: 100%;
overflow-x: auto;
}
ul.ulthumbs {
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
}
ul.ulthumbs li {
display: inline-block;
cursor: pointer;
}
#imgBody{
overflow: hidden;
margin-top: 15px;
width: 100%;
height: 70%;
background-color: pink;
}
JS
$(document).ready(function (){
$('.ulthumbs li img').on('click', function(){
$('#imgBody').html('');
var imgSrc = $(this).attr('src');
var img = "<img src='"+imgSrc+"' width='100%' height='auto'>";
$('#imgBody').append(img);
});
});