I'm trying to make a carousel using fadeIn and fadeOut but the first picture fades out while the next picture simply appears after. I want to make a smooth transition. I also structured this code according to what I learned from Codecademy. I can't really determine what went wrong. I'm using Bootstrap.
HTML:
<div class = "slidingPhotos" align="center">
<div class = "slide active-item">
<div class = "photo1">
<img src = "Images/mainImage.jpg"></img>
</div>
<div class = "description">
<h3> Welcome to O-Grocery! Your #1 Online Grocery Store </h3>
</div>
</div>
<div class = "slide ">
<div class = "container">
<div class = "photo1">
<img src = "Images/mainImage3.jpg"></img>
</div>
<div class = "description">
<h3> You have a thousand products to choose from at O-Grocery! </h3>
</div>
</div>
</div>
<div class = "slide">
<div class = "container">
<div class = "photo1">
<img src = "Images/mainImage2.jpg"></img>
</div>
<div class = "description">
<h3> You can guarantee 100% freshness of goods! </h3>
</div>
</div>
</div>
</div>
<div class ="footer" align="center">
<div class = "dots">
<div class = "arrow-prev">
<a href ="#"><img src = "Images/arrow-prev.png"></img></a>
</div>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<div class = "arrow-next">
<a href ="#"><img src = "Images/arrow-next.png"></img></a>
</div>
</div>
</div>
JQuery
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if(nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut('slow').removeClass('active-slide');
nextSlide.fadeIn('slow').addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
Animation via fadeIn and fadeOut is asynchronous and since you are starting both animations at the same time, by the time the first thing fades out the second thing is already done fading in. You basically just need to force a delay on the second animation somehow, either by making sure that it is called after the first animation completes, or by knowing that the slow speed in jQuery is 600 milliseconds. (Source: http://api.jquery.com/animate/)
You can get more control over animation by using .animate() but you can also fake it in this case by using setTimeout() after the first animation to make sure that it can finish before the second animation begins.
You can run this example right from the answer:
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if(nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut('slow').removeClass('active-slide');
setTimeout(function(){ nextSlide.fadeIn('slow').addClass('active-slide'); }, 300);
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});.slide { display: none; }
.slide.active-item {display:block;}
img {display:none;}
a {display:inline-block;background-color:#666;color:#fff;padding: 15px;margin:10px;}
.dots div {display:inline-block; }
.slidingPhotos { height: 55px; width: 500px; margin-bottom: 10px; display:block;background-color: #ccc; }
.slide { position: absolute; top: 10; height: 55px; width: 500px; text-align: center; color:Blue;font-family:"Segoe UI",Arial,"sans serif"; font-size:14px;}<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class = "slidingPhotos">
<div class = "slide active-item active-slide">
<div class = "photo1">
<img src = "Images/mainImage.jpg"></img>
</div>
<div class = "description">
<h3> Welcome to O-Grocery! Your #1 Online Grocery Store </h3>
</div>
</div>
<div class = "slide ">
<div class = "container">
<div class = "photo1">
<img src = "Images/mainImage3.jpg"></img>
</div>
<div class = "description">
<h3> You have a thousand products to choose from at O-Grocery! </h3>
</div>
</div>
</div>
<div class = "slide">
<div class = "container">
<div class = "photo1">
<img src = "Images/mainImage2.jpg"></img>
</div>
<div class = "description">
<h3> You can guarantee 100% freshness of goods! </h3>
</div>
</div>
</div>
</div>
<div class ="footer" align="center">
<div class = "dots">
<div class = "arrow-prev">
<a href ="#">PREVIOUS<img src = "Images/arrow-prev.png"></img></a>
</div>
<div class = "arrow-next">
<a href ="#">NEXT<img src = "Images/arrow-next.png"></img></a>
</div>
</div>
</div>