如何在我的jquery滑块上添加淡入淡出效果？

Question

我一直在使用这个滑块，我已经缩减到了我需要的位置。现在我试图在幻灯片之间添加淡入淡出效果。我还在学习jquery，特别是var函数。以下是正在发挥作用的代码：

JQUERY

(function ($) {

$(function () {
    var currentIndex = 0,
        items = $('.unique-slider div'),
        itemAmt = items.length;
    function cycleItems() {
        var item = $('.unique-slider div').eq(currentIndex);
        items.hide();
        item.css('display', 'inline-block');
    }

    var autoSlide = setInterval(function () {
            currentIndex += 1;
            if (currentIndex > itemAmt - 1) {
                currentIndex = 0;
            }
            cycleItems();
        }, 3000);

    $('#right').click(function () {
        currentIndex += 1;
        if (currentIndex > itemAmt - 1) {
            currentIndex = 0;
        }
        cycleItems();
    });
    $('#left').click(function () {
        currentIndex -= 1;
        if (currentIndex < 0) {
            currentIndex = itemAmt - 1;
        }
        cycleItems();
    });
});

})(jQuery);

HTML

<section class='slider-body'>          
    <div id='left' class='arrows'>
        <img src='/wp-content/uploads/2017/01/left.png'>
    </div>
    <div id='right' class='arrows'>
        <img src='/wp-content/uploads/2017/01/right.png'>
    </div>        
    <div class='slider unique-slider'>
        <div class='slide' style='display: inline-block;'>
            <img class='img-slide' src='SOURCE'/>
        </div>
        <div class='slide'>
            <img class='img-slide' src='SOURCE'/>
        </div>            
    </div>
</section>

CSS

.slider-body {
position: relative;
width: auto;
overflow: hidden;
}

.slider {
    position: relative;
    width: 100vw;
    height: auto;
    margin: 0 auto;
    text-align: center;
}

.slider div {
    display: inline-block;
    display: none;
    background-color: white;
    width: 100%;
}

.slide {
    height: 100%;
}

.img-slide {
    position: relative;
    margin: 0 auto;
    height: 100vh;
}

#test-right,
#right {
    right: 5px;
    padding-left: 5px;
}

#test-left,
#left {
    left: 5px;
    padding-right: 5px;
}

.arrows {
    z-index: 20;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    padding: 5px;
    background-color: #ffffff;
    opacity: 0.7
}

Answer 1

＆＃13;

＆＃13;

$(function () {
    var currentIndex = 0,
        items = $('.unique-slider div'),
        itemAmt = items.length;
    function cycleItems() {
        var item = $('.unique-slider div').eq(currentIndex);
        items.hide();
        item.css('display', 'inline-block');
        item.addClass('fade');
    }

    var autoSlide = setInterval(function () {
            currentIndex += 1;
            if (currentIndex > itemAmt - 1) {
                currentIndex = 0;
            }
            cycleItems();
        }, 3000);

    $('#right').click(function () {
        currentIndex += 1;
        if (currentIndex > itemAmt - 1) {
            currentIndex = 0;
        }
        cycleItems();
    });
    $('#left').click(function () {
        currentIndex -= 1;
        if (currentIndex < 0) {
            currentIndex = itemAmt - 1;
        }
        cycleItems();
    });
});

＆＃13;

.slider-body {
position: relative;
width: auto;
overflow: hidden;
}

.slider {
    position: relative;
    width: 100vw;
    height: auto;
    margin: 0 auto;
    text-align: center;
}

.slider div {
    display: inline-block;
    display: none;
    background-color: white;
    width: 100%;
}

.slide {
    height: 100%;
}

.img-slide {
    position: relative;
    margin: 0 auto;
    height: 100vh;
}

#test-right,
#right {
    right: 5px;
    padding-left: 5px;
}

#test-left,
#left {
    left: 5px;
    padding-right: 5px;
}

.arrows {
    z-index: 20;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    padding: 5px;
    background-color: #ffffff;
    opacity: 0.7
}
.fade{
    animation : 2s ease-out blur;
}
@keyframes blur{
5%{
-webkit-filter: blur(5px); /* Safari */
opacity :0;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='slider-body'>          
    <div id='left' class='arrows'>
        <img src='/wp-content/uploads/2017/01/left.png'>
    </div>
    <div id='right' class='arrows'>
        <img src='/wp-content/uploads/2017/01/right.png'>
    </div>        
    <div class='slider unique-slider'>
        <div class='slide' style='display: inline-block;'>
            <img class='img-slide' src='https://i.ytimg.com/vi/VDrhg-wSOdQ/hqdefault.jpg'/>
        </div>
        <div class='slide'>
            <img class='img-slide' src='https://pbs.twimg.com/profile_images/828213014599839749/VGv8LT6T.jpg'/>
        </div>            
    </div>
</section>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

$(document).ready(function(){
$('#bt').on('click',function(){
$('')
$('.fade').html('<img height="50" src="https://pbs.twimg.com/profile_images/828213014599839749/VGv8LT6T.jpg">').hide().fadeIn(1000);
});

});

＆＃13;

img {
    animation : 2s ease-out blur;
}
@keyframes blur{
5%{
-webkit-filter: blur(5px); /* Safari */
    filter: blur(5px);
     -webkit-filter: brightness(200%); /* Safari */
    filter: brightness(200%);
    margin-left :30%;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="bt">fade in</button>
<hr />
<div class="fade"></div>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

$(document).ready(function(){
$('#bt').on('click',function(){
$('.fade').html('<img height="50" src="https://pbs.twimg.com/profile_images/828213014599839749/VGv8LT6T.jpg">').hide().fadeIn(1000);
});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="bt">fade in</button>
<hr />
<div class="fade"></div>

＆＃13;

＆＃13;

＆＃13;