如何淡出/放大滑塊中的內容

Question

小提琴： 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（）？ 我沒有在您的代碼中看到它，請單擊此鏈接以查看它是否可以滿足您的需求 。