javascript - 使用 toggleClass 淡入淡出图像

Question

这是一个用作简单旋转木马的脚本，当单击 prev 和 next 按钮时淡入淡出一些图像。

我通过jQuery的fadeIn()和fadeOut()方法成功实现了淡入淡出。

var speed = 100;

$('.prev').click(function(event){
    event.preventDefault(); 

    var current = $(this).parent().next('ul.images').children(':visible'),
    lastSib = $(this).parent().next('ul.images').children(':last'),
    prevSib = current.prev();

    prevSib = prevSib.index() == -1 ? lastSib : prevSib; 

    current.fadeOut(speed,function(){
        prevSib.fadeIn(speed);
    });

});

我决定尝试另一种解决方案，通过使用 toggleClass() 方法切换类，使用 css 实现淡化效果来淡化每张图像。这是我的问题发生的地方......唯一现在褪色的图像是第一张图像。我无法再访问任何其他图像。

我推测我可能需要遍历每张图片并以稍微不同的方式处理此解决方案。

这是一个链接 codepen

$(document).ready(function(){

    var speed = 100;

    $('.prev').click(function(event){
        event.preventDefault(); 

        var current = $(this).parent().next('ul.images').children(':visible'),
        lastSib = $(this).parent().next('ul.images').children(':last'),
        prevSib = current.prev();
        prevSib = prevSib.index() == -1 ? lastSib : prevSib; 

     // fading out fading in  
        current.toggleClass('out');
        prevSib.toggleClass('in');
    });

$('.next').click(function(event){
    event.preventDefault();

    var current = $(this).parent().next('ul.images').children(':visible'),
    firstSib = $(this).parent().next('ul.images').children(':first'),
    nextSib = current.next();

    nextSib = nextSib.index() == -1 ? firstSib : nextSib; 

        current.toggleClass('out');
        nextSib.toggleClass('in');
});

$('.images li').click(function(event){
    event.preventDefault();

    var firstImg = $(this).parent().children(':first'),
            nextImg = $(this).next();

    nextImg = nextImg.index() == -1 ? firstImg : nextImg;

    $(this).toggleClass('out');
    nextImg.toggleClass('in');

    });
});

Answer 1

我对您的 CSS 和 JQuery 代码进行了一些更改。使用这些更新的代码，它将帮助您满足您的要求。

CSS 代码

        .images li{
            list-style:none;
            display:none;
        }

        .images li:first-child{
            display: block;
        }

        li{
            transition:opacity 0.4s;
            opacity:1;
        }

        .out{
            transition:opacity 0.2s;
            opacity:0;
            display:none !important;
        }

        .in{
            transition:opacity 0.4s;
            opacity:1;
            display:list-item !important;
        }

下一个和上一个点击事件的 JQuery 代码

$('.prev').click(function(event){
            event.preventDefault(); 

            var current = $(this).parent().next('ul.images').children(':visible'),
            lastSib = $(this).parent().next('ul.images').children(':last'),
            prevSib = current.prev();

            // true previous 
            prevSib = prevSib.index() == -1 ? lastSib : prevSib; 

            current.removeAttr('class');
            current.toggleClass('out');
            prevSib.toggleClass('in');
        });

        $('.next').click(function(event){
            event.preventDefault();

            var current = $(this).parent().next('ul.images').children(':visible'),
            firstSib = $(this).parent().next('ul.images').children(':first'),
            nextSib = current.next();

            // true next 
            nextSib = nextSib.index() == -1 ? firstSib : nextSib; 

            current.removeAttr('class');
            current.toggleClass('out');
            nextSib.toggleClass('in');
        });