Wie fade out/in Inhalt in einem Schieber

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); 
}); 

Alles funktioniert gut, außer, wie kann ich die Jquery/css so anstatt zu zeigen, die Folie, Update blendet die aktuelle Folie aus und blendet die nächste Folie ein, wobei die Struktur beibehalten wird.

Answer 1

Haben Sie versucht, fadeOut() fadeIn()? Ich habe es nicht in deinem Code gesehen, folge diesem Link, um zu sehen, ob es deinen need erfüllt.