jQuery FadeOut FadeIn

Question

I am messing with html, css and jquery, and I've run in this problem. I have a slideshow that gets images using fadeIn and fadeOut from a container, but when I press 'next', it's resetting the page and loads the next image somewhere at the bottom. Can you tell me what's the problem?

HTML

<div class="slideshow ">
<div class="container">
<div class="slides">
<img class ="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg">
<img class ="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg">
<img class ="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg">
<img  class="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW">
</div>
</div>



<div class="container ">
<ul class="slider-dots">
<a href="#/" class="arrow-prev"><<</a>
    <li class="dot active-dot">&bull;</li>
    <li class="dot">&bull;</li>
    <li class="dot">&bull;</li>
    <li class="dot">&bull;</li>
<a href="#/" class="arrow-next">>></a>
</ul>
</div>
</div>

jquery

var main=function(){
$('.arrow-next').click(function(event){
    event.stopPropagation();
    var currentSlide=$('.active-slide');
    var nextSlide=$('.active-slide').next();

    var currentDot=$('.active-dot');
    var nextDot=currentDot.next();

    if(nextSlide.length==0) {nextDot=$('.dot').first(); nextSlide=$('.slide').first();}

    currentSlide.fadeOut().removeClass('active-slide');
    nextSlide.fadeIn().addClass('active-slide');

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');


}); 

$('.arrow-prev').click(function(event){
    event.stopPropagation();
    var currentSlide=$('.active-slide');
    var prevSlide=currentSlide.prev();

    var currentDot=$('.active-dot');
    var prevDot=currentDot.prev();

if(prevSlide.length==0) {prevDot=$('.dot').last(); prevSlide=$('.slide').last();}

    currentSlide.fadeOut().removeClass('active-slide');
    prevSlide.fadeIn().addClass('active-slide');

    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');

}); 

};

$(document).ready(main);

You can see it all in this fiddlehttp://jsfiddle.net/1zLd58yo/

Answer 1

Looks like you have a fadeOut then a fadeIn. After the fadeout, the image disappears then a new one appears. There is a repaint/happening after the fadeout.

Apply the following css rules to fix your issue.

On div.slides, -Set a fixed width and height -Set position to relative

On the images, - set position=absolute

Answer 2

Set the div slides to a specific height then add put the fadeIn in a function after fadeOut, this will make sure the height doesn't grow too big. That way you can avoid setting position to absolute.

currentSlide.fadeOut().removeClass('active-slide', function(){
    prevSlide.fadeIn().addClass('active-slide');
});

First slide will completely fade out then the next one will fade in.