javascript - 如何淡出/淡入 slider 中的内容

Question

fiddle :https://jsfiddle.net/fLfg7yqn/

JQuery:

$(function () {
    $('.dvContentSlide').not(':eq(0)').addClass("dispNone");
    $('.dvContentSlide:eq(0)').addClass("slideIsActive");
    var g = parseInt($('div.slideIsActive').index()) + 1;
    var u = $(".dvContentSlide").length;
    $("#spCur").text("Current Index: " + g);
    $("#spDVLen").text("SLIDE div length: " + $(".dvContentSlide").length);

    for (var i = 0; i < u; i++)
        $(".ulContentSliderNav").append('<li><a href="javascript:void(0);"><span></span></a></li>');

    $(".ulContentSliderNav :first-child a").addClass("ulContentSliderNavSel");
    $(".cSlider").mouseover(function () {
        clearInterval(po);
    }).mouseout(function () {
        po = setInterval(AutoSlide, 4000);
    });

    $(".ulContentSliderNav a").click(function (e) {
        e.preventDefault();
        $(this).parent().parent().find(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
        $(this).addClass("ulContentSliderNavSel");

        GoToTheSlide($(this).parent().index());
    });

    function GoToTheSlide(t) {
        $('.dvContentSlide').addClass("dispNone");
        $('.dvContentSlide').removeClass("slideIsActive");
        $('.dvContentSlide:nth-child(' + ++t + ')').addClass("slideIsActive").removeClass("dispNone");
    }

    $("#aContentSliderNext").click(function () {
        var k = $('div.slideIsActive').index() + 1;
        if (k >= $(".dvContentSlide").length) {
            k = 1;
            $('.dvContentSlide').not(':eq(0)').addClass("dispNone").removeClass("slideIsActive");
            $('.dvContentSlide:eq(0)').addClass("slideIsActive").removeClass("dispNone");
        }
        else {
            $(".dvContentSlide:nth-child(" + k + ")").removeClass("slideIsActive").addClass("dispNone");
            $(".dvContentSlide:nth-child(" + ++k + ")").removeClass("dispNone").addClass("slideIsActive");
        }
        $("#spCur").text("Current Index: " + k);
        $(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
        $(".ulContentSliderNav li:nth-child(" + k + ") a").addClass("ulContentSliderNavSel");
    });
    $("#aContentSliderPrev").click(function () {
        var k = $('div.slideIsActive').index() + 1;
        if (k <= 1) {
            k = $(".dvContentSlide").length;
            $('.dvContentSlide').not(':eq(' + k + ')').addClass("dispNone").removeClass("slideIsActive");
            $('.dvContentSlide:nth-child(' + k + ')').addClass("slideIsActive").removeClass("dispNone");
        }
        else {
            $(".dvContentSlide:nth-child(" + k + ")").removeClass("slideIsActive").addClass("dispNone");
            $(".dvContentSlide:nth-child(" + --k + ")").removeClass("dispNone").addClass("slideIsActive");
        }
        $("#spCur").text("Current Index: " + k);
        $(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
        $(".ulContentSliderNav li:nth-child(" + k + ") a").addClass("ulContentSliderNavSel");
    });

    function AutoSlide() {
        var k = $('div.slideIsActive').index() + 1;
        console.log(k);
        if (k >= $(".dvContentSlide").length) {
            k = 1;
            $('.dvContentSlide').not(':eq(0)').addClass("dispNone").removeClass("slideIsActive");
            $('.dvContentSlide:eq(0)').addClass("slideIsActive").removeClass("dispNone");
        }
        else {
            $(".dvContentSlide:nth-child(" + k + ")").removeClass("slideIsActive").addClass("dispNone");
            $(".dvContentSlide:nth-child(" + ++k + ")").removeClass("dispNone").addClass("slideIsActive");
        }
        $("#spCur").text("Current Index: " + k);
        $(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
        $(".ulContentSliderNav li:nth-child(" + k + ") a").addClass("ulContentSliderNavSel");
    }
    var po = setInterval(AutoSlide, 4000);
});

一切正常，除了我如何更新 jquery/css，所以它不会显示幻灯片，而是淡出当前幻灯片并在保持结构不变的情况下淡出下一张幻灯片。

Answer 1

你试过 fadeOut() fadeIn() 吗？我没有在你的代码中看到它，点击这个链接看看它是否会满足你的 need .