Jquery Schieberegler Animation Problem

Question

Ich lerne schriftlich in Jquery und ich stieß auf ein Problem mit animierenden Schieberegler.

Demo: https://jsfiddle.net/ywrscmpo/1/

Das Problem ist der Übergang, das ist hässlich, und ich weiß nicht, wie es zu beheben. Wie man es löst?

$(document).ready(function(){ 

var lewo = $('.lewo'); 
var prawo = $('.prawo'); 

var teraz = 0; 

$('.slider-box ul li ').eq(teraz).addClass('aktywny'); 

$(".lewo").click(function(){ 
    $('.slider-box ul li').eq(teraz).fadeOut(1000); 
    $('.slider-box ul li').eq(teraz).removeClass('aktywny'); 
    teraz = teraz - 1; 

    if(teraz == -1) 
    { 
     teraz = 3; 
    } 

    $('.slider-box ul li').eq(teraz).fadeIn(1000); 
    $(".slider-box ul li").eq(teraz).addClass('aktywny'); 

}); 

$(".prawo").click(function(){ 
    $('.slider-box ul li').eq(teraz).fadeOut(1000); 
    $('.slider-box ul li').eq(teraz).removeClass('aktywny'); 
    teraz = teraz + 1; 

    if(teraz == 4) 
    { 
     teraz = 0; 
    } 
    $('.slider-box ul li').eq(teraz).fadeIn(1000); 
    $(".slider-box ul li").eq(teraz).addClass('aktywny'); 

}); 

Answer 1

Wegen fadeOut() wird das nächste Bild angezeigt. Anstatt fadeOut() Wenn Sie hide() verwenden, wird es funktionieren. Das aktuelle Bild wird sofort ausgeblendet und das nächste Bild wird als Animation angezeigt.

<div id="kontener1"> 
 
     <div class="slider-box"> 
 
\t \t \t \t 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <div class="lewo"> </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <li> <img src="http://wallpapercave.com/wp/GUAaScC.jpg" alt="1"> </li> 
 
\t \t \t \t \t <li> <img src="https://wallpaperscraft.com/image/board_black_line_texture_background_wood_55220_1920x1080.jpg" alt="2"> </li> 
 
\t \t \t \t \t <li> <img src="https://wallpaperscraft.com/image/black_background_pattern_light_texture_55291_1920x1080.jpg" alt="3"> </li> 
 
\t \t \t \t \t <li> <img src="https://wallpaperscraft.com/image/dark_background_line_surface_65896_1920x1080.jpg" alt="4"> </li> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="prawo"> </div> 
 
\t \t \t \t </ul> 
 
\t 
 
\t \t \t </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 

 

 

 
\t var lewo = $('.lewo'); 
 
\t var prawo = $('.prawo'); 
 

 
\t var teraz = 0; 
 

 
\t $('.slider-box ul li ').eq(teraz).addClass('aktywny'); 
 

 
\t $(".lewo").click(function(){ 
 
\t \t $('.slider-box ul li').eq(teraz).hide(); 
 
\t \t $('.slider-box ul li').eq(teraz).removeClass('aktywny'); 
 
\t \t teraz = teraz - 1; 
 
\t \t 
 
\t \t if(teraz == -1) 
 
\t \t { 
 
\t \t \t teraz = 3; 
 
\t \t } 
 
\t \t 
 
\t \t $('.slider-box ul li').eq(teraz).fadeIn(1000); 
 
\t \t $(".slider-box ul li").eq(teraz).addClass('aktywny'); 
 
\t \t 
 
    }); 
 
\t 
 
\t $(".prawo").click(function(){ 
 
\t \t $('.slider-box ul li').eq(teraz).hide(); 
 
\t \t $('.slider-box ul li').eq(teraz).removeClass('aktywny'); 
 
\t \t teraz = teraz + 1; 
 
\t \t 
 
\t \t if(teraz == 4) 
 
\t \t { 
 
\t \t \t teraz = 0; 
 
\t \t } 
 
\t \t $('.slider-box ul li').eq(teraz).fadeIn(1000); 
 
\t \t $(".slider-box ul li").eq(teraz).addClass('aktywny'); 
 
\t \t 
 
    }); 
 
\t $(".lewo").click(); 
 

 

 
}); 
 
</script> 
 
<style> 
 
*, *, *:after, *:before { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
\t list-style: none; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
\t font-size:0px; 
 
} 
 

 
.slider-box { 
 
\t position:relative; 
 
\t width:80%; 
 
\t height:100%; 
 
\t margin:0 auto; 
 
\t height:100px; 
 
} 
 

 
.slider-box ul { 
 
\t position:relative; 
 
\t 
 
\t background-color:grey; 
 
} 
 

 
.slider-box ul li { 
 
\t width:100%; 
 
\t height:100%; 
 
\t display:none; 
 
} 
 

 
.slider-box img { 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 

 
.slider-box ul .aktywny{ 
 
\t display:block; 
 
} 
 

 
.slider-box ul .lewo, .prawo { 
 
\t position:absolute; 
 
\t width:100px; 
 
\t height:100%; 
 
\t background-color:grey; 
 
\t z-index: 100; 
 
\t cursor:pointer; 
 
} 
 

 
.slider-box ul .prawo { 
 
\t right:0; 
 
\t top:0; 
 
} 
 
</style>