我正试图让我的滑块使用不透明度属性以及渐变和轻松进入动画中更柔和的淡入淡出但是由于某种原因它不能按预期工作，我想让它变得非常柔软所以相反一个白色闪光灯或其他东西滑块图像慢慢淡出并显示下一个图像。 JQuery的淡入和淡出太粗糙了。
$(document).ready(function(){
var interval = 8000;
var sliders = $('.slider');
var dots = $('.dot');
var index = 0;
var show_index = 0;
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
console.log(sliders.length);
setInterval(function() {
if(show_index == (sliders.length- 1)){
$('.slider').eq(show_index).removeClass('active_slider');
show_index = 0; // set it here
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').removeClass('active_dot');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
}
else{
$('.slider').eq(show_index).removeClass('active_slider');
show_index = show_index + 1; // set it here
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').removeClass('active_dot');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
}
}, interval);
$('.prev').click(function(){
console.log('clicked prev');
if(show_index == 0){
$('.slider').eq(show_index).removeClass('active_slider');
show_index = (sliders.length - 1);// set it here
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').removeClass('active_dot');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
}
else{
$('.slider').eq(show_index).removeClass('active_slider');
show_index = show_index - 1; // set it here
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').removeClass('active_dot');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
}
});
$('.next').click(function(){
console.log('clicked next');
if(show_index == (sliders.length- 1)){
$('.slider').eq(show_index).removeClass('active_slider');
show_index = 0; // set it here
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').removeClass('active_dot');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
}
else{
$('.slider').eq(show_index).removeClass('active_slider');
show_index = show_index + 1; // set it here
$('.slider').eq(show_index).addClass('active_slider');
$('.dot').removeClass('active_dot');
$('.dot').eq(show_index).addClass('active_dot');
console.log(show_index);
}
});
$('.slider').each(function(){
$('.gran_slider_big_navegation_container').append('<span class="dot"></span>');
});
$('.dot').click(function(){
index = $(this).index();
console.log(index);
$('.slider').removeClass('active_slider');
$('.slider').eq(index).addClass('active_slider');
$('.dot').removeClass('active_dot');
$('.dot').eq(index).addClass('active_dot');
show_index = index;
});
$(function() {
$(window).on('scroll', function() {
$('#background').css('margin-top', $(window).scrollTop() * -.3);
});
});
$(".responsive_nav_header_nav_menu_toggle").click(function(e){
e.preventDefault();
$('.responsive_nav_header_nav_link').toggleClass('visible');
});
$(".rest_menu_options_texts_type").click(function(e){
e.preventDefault();
var menu_type = $(this).attr("data-menu");
console.log(menu_type);
$('.rest_menu_item_container').removeClass('visible');
$('.rest_menu_item_container[data-menu=' + menu_type + ']').addClass('visible');
});
});.gran_slider_maincontainer{width:100%; height:100vh; display:flex; flex-direction:column; overflow:hidden;}
.gran_slider_big_container{width:100%; position:relative; height:90vh; overflow:hidden;}
.prev{cursor:pointer; position:absolute; left:20px; transition:all 1000ms ease; opacity:0; z-index:9999999999999999999999999999; top:50%; transform:translateY(-50%); font-size:20px; color:rgba(255,255,255,0.8);}
.next{cursor:pointer; position:absolute; right:20px; transition:all 1000ms ease; opacity:0; z-index:9999999999999999999999999999; top:50%; transform:translateY(-50%); font-size:20px; color:rgba(255,255,255,0.8);}
.gran_slider_big_navegation_container{width:auto; height:30px; display:flex; align-items:center; position:absolute; bottom:25px; right:50px; z-index:9999999999999999999999999999;}
.dot{width:15px; height:15px; background-color:rgba(0,0,0,0.7); transition: all 2000ms ease; margin:0px 6px; border-radius:50%; cursor:pointer;}
.gran_slider_big_container:hover .prev{opacity:1;}
.gran_slider_big_container:hover .next{opacity:1;}
.gran_slider_big_item_container{display:none; opacity:0; transition: opacity 1s ease-in-out; width:100%; height:100%; position:relative; overflow:hidden;}
.gran_slider_big_item_gradient_overlay{width:100%; height:100%; z-index:3; background-color:rgba(0,0,0,0.4); position:absolute; top:0px; left:0px;}
.gran_slider_big_item_image{width:100%; height:100%; z-index:2; background-size:cover;}
.gran_slider_big_item_texts_container{width:55%; height:auto; display:flex; flex-direction:column; padding:10px;}
.gran_slider_big_item_texts_title{font-size:45px; color:white; font-weight:400; margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_big_item_texts_description{font-size:30px; color:white; font-weight:400 margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_small_container{width:100%; height:10vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));}
.active_slider{display:flex; opacity:1;}
.active_dot{background-color:rgba(255,255,255,0.9);}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gran_slider_maincontainer" style="">
<div class="gran_slider_big_container" style=" ">
<i class="prev fa fa-chevron-left" style=""></i>
<i class="next fa fa-chevron-right" style=""></i>
<div class="gran_slider_big_navegation_container" style=" "></div>
<div class="gran_slider_big_item_container slider" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:green;"></div>
<div class="gran_slider_big_item_texts_container from_top_to_bottom_centered" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
<div class="gran_slider_big_item_container slider" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:yellow;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
<div class="gran_slider_big_item_container slider" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:red;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
</div>
<div class="gran_slider_small_container" style=""></div>
</div>