Jquery滑块动画麻烦

Question

我在jquery学习写作，我遇到了动画滑块的问题。

演示：https://jsfiddle.net/ywrscmpo/1/

问题是过渡，这是丑陋的，我不知道如何解决它。怎么解决？

$(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

由于fadeOut()，将显示下一张图片。而不是fadeOut()如果您使用 hide()它会奏效。当前图像将隐藏immediatle，下一个图像将处于动画效果中。

＆＃13;

＆＃13;

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(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).hide();
		$('.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).hide();
		$('.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');
		
    });
	$(".lewo").click();


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

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

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

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

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

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

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

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

＆＃13;

＆＃13;

＆＃13;