Why does the jQuery slide bounce on selection?

Question

This is my first attempt to create a button based slider.

Every slide is divided into 2 parts, the left part contains an image and the right part contains some text. When switching slides there's an unexpected bounce just before the slide loads and I can't seem to understand why it occurs.

Is there any good way to implement this same slide?

Here is the code:

 $( function() { imw_slider(); }) function imw_slider() { var button = $( '.slide-button' ); button.click( function() { button.css( 'background-color', '#fff' ); $(this).css( 'background-color', '#eee' ); var index = $(this).index(); var image = $(this).parent().prev(); image.children('.slide:not(:nth-child('+(index+1)+'))').fadeOut( function() { image.children('.slide:nth-child('+(index+1)+')').fadeIn(); }); }); } 

 .image-box > .images { text-align: center; } .image-box > .images > .slide:nth-child(1) { display: block; } .image-box .slide.slide-2 { position: relative; max-width: 80rem; margin: 0 auto; } .image-box > .images > .slide { display: none; } .image-box > .images > .slide:after { display: block; content: ''; clear: both; } .image-box .slide.slide-2 > div { width: 50%; float: left; } .image-box .buttons { display: table; margin: 0 auto; margin-top: 15px; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; } .image-box .buttons .slide-button { display: table-cell; cursor: pointer; padding: 2px 10px; border-right: 1px solid #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="image-box my4"> <div class="images"> <div class="slide slide-2"> <div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div> <div> <div class="text"> <h2>This is the text for slide 1</h2></div> </div> </div> <div class="slide slide-2"> <div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div> <div> <div class="text"> <h2>This is the text for slide 2</h2></div> </div> </div> <div class="slide slide-2"> <div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div> <div> <div class="text"> <h2>This is the text for slide 3</h2></div> </div> </div> </div> <div class="buttons"><span class="slide-button">button-1</span><span class="slide-button">button-2</span><span class="slide-button">button-3</span></div> </div> 

Answer 1

Instead of fading out all the slides other than the one that is been faded in , you can first hide them and fade in the current slide using this:

image.children('.slide:not(:nth-child('+(index+1)+'))').hide();
image.children('.slide:nth-child('+(index+1)+')').fadeIn();

Or better still, you can save the last active slide and fade out that and fade in the current one:

    if (prev_slide) {
      prev_slide.fadeOut(function() {
        prev_slide = image.children('.slide:nth-child(' + (index + 1) + ')');
        prev_slide.fadeIn();
      });
    } else {
      prev_slide = image.children('.slide:nth-child(' + (index + 1) + ')');
      prev_slide.fadeIn();
    }

See demo below:

 $(function() { imw_slider(); }) var prev_slide = null; function imw_slider() { var button = $('.slide-button'); button.click(function() { button.css('background-color', '#fff'); $(this).css('background-color', '#eee'); var index = $(this).index(); var image = $(this).parent().prev(); if (prev_slide) { prev_slide.fadeOut(function() { prev_slide = image.children('.slide:nth-child(' + (index + 1) + ')'); prev_slide.fadeIn(); }); } else { prev_slide = image.children('.slide:nth-child(' + (index + 1) + ')'); prev_slide.fadeIn(); } }); } 

 .image-box > .images { text-align: center; } .image-box > .images > .slide:nth-child(1) { display: block; } .image-box .slide.slide-2 { position: relative; max-width: 80rem; margin: 0 auto; } .image-box > .images > .slide { display: none; } .image-box > .images > .slide:after { display: block; content: ''; clear: both; } .image-box .slide.slide-2 > div { width: 50%; float: left; } .image-box .buttons { display: table; margin: 0 auto; margin-top: 15px; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; } .image-box .buttons .slide-button { display: table-cell; cursor: pointer; padding: 2px 10px; border-right: 1px solid #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="image-box my4"> <div class="images"> <div class="slide slide-2"> <div> <img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /> </div> <div> <div class="text"> <h2>This is the text for slide 1</h2> </div> </div> </div> <div class="slide slide-2"> <div> <img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /> </div> <div> <div class="text"> <h2>This is the text for slide 2</h2> </div> </div> </div> <div class="slide slide-2"> <div> <img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /> </div> <div> <div class="text"> <h2>This is the text for slide 3</h2> </div> </div> </div> </div> <div class="buttons"><span class="slide-button">button-1</span><span class="slide-button">button-2</span><span class="slide-button">button-3</span> </div> </div> 

Answer 2

It seems JQuery is calling the callback of the fadeOut function immediately. There is a related discussion you can refer to: JQuery fadeOut(function(){fadeIn});

You can simply delay the fadeIn:

 $( function() { imw_slider(); }) function imw_slider() { var button = $( '.slide-button' ); button.click( function() { button.css( 'background-color', '#fff' ); $(this).css( 'background-color', '#eee' ); var index = $(this).index(); var image = $(this).parent().prev(); image.children('.slide:not(:nth-child('+(index+1)+'))').fadeOut( 1000, function() { image.children('.slide:nth-child('+(index+1)+')').delay(1000).fadeIn(1000); }); }); } 

 .image-box > .images { text-align: center; } .image-box > .images > .slide:nth-child(1) { display: block; } .image-box .slide.slide-2 { position: relative; max-width: 80rem; margin: 0 auto; } .image-box > .images > .slide { display: none; } .image-box > .images > .slide:after { display: block; content: ''; clear: both; } .image-box .slide.slide-2 > div { width: 50%; float: left; } .image-box .buttons { display: table; margin: 0 auto; margin-top: 15px; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; } .image-box .buttons .slide-button { display: table-cell; cursor: pointer; padding: 2px 10px; border-right: 1px solid #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="image-box my4"> <div class="images"> <div class="slide slide-2"> <div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div> <div> <div class="text"> <h2>This is the text for slide 1</h2></div> </div> </div> <div class="slide slide-2"> <div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div> <div> <div class="text"> <h2>This is the text for slide 2</h2></div> </div> </div> <div class="slide slide-2"> <div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div> <div> <div class="text"> <h2>This is the text for slide 3</h2></div> </div> </div> </div> <div class="buttons"><span class="slide-button">button-1</span><span class="slide-button">button-2</span><span class="slide-button">button-3</span></div> </div>