How to fade out/in content in a 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);
});

Everything is working fine except how can I update the jquery/css so instead of showing the slide, it fades out the current slide and fades in the next slide with keeping the structure as is.

Answer 1

Have you tried fadeOut() fadeIn()? I didn't see it in your code, follow this link to see if it will meet your need .