Javascript 幻灯片更改后淡入对象

在divs滑入视图后，我试图淡入

h4

标记。此外，我还想将类“current”添加到视图中的每张幻灯片中。小提琴。代码

jQuery：

$(document).ready(function(){
    var width = 550;
            var speed = 1000;
            var pause = 3000;
            var currentSlide = 1;
            var $slider = $(".slider");
            var $slides = $slider.find('.slides');
            var $slide = $slider.find('.slide');
            $slide.first().addClass('current');
            //alert($slide.length);

            setInterval(function(){

                $slides.animate({'margin-left': '-='+ width}, speed, function(){

                    currentSlide++;
                    if (currentSlide === $slide.length) {
                        currentSlide = 1;
                        $slides.css('margin-left', 0);

                    }


                });

            }, pause);

    });

查看演示。我已经修改了animate（）函数的回调参数

$slides.animate({'margin-left': '-='+ width}, speed, function(){

            currentSlide++;
            $slide.removeClass("current");
            if (currentSlide === $slide.length) {
                currentSlide = 1;
                $slides.css('margin-left', 0);

            }
            $slides.find("h4").hide();
            $slide.eq(currentSlide-1).addClass("current");
            $slide.eq(currentSlide-1).find("h4").fadeIn();
        });

---

首先更新css，将h4隐藏在幻灯片div中

.slide h4 {
    display:none;
}       

然后在查询代码中做一些更改

    $(document).ready(function(){
        var width = 550;
        var speed = 1000;
        var pause = 3000;
        var currentSlide = 1;
        var $slider = $(".slider");
        var $slides = $slider.find('.slides');
        var $slide = $slider.find('.slide');
        $slide.first().addClass('current');

        //fade in the first slide h4
        $('.current h4').fadeIn();


        setInterval(function(){

            $slides.animate({'margin-left': '-='+ width}, speed, function(){

                currentSlide++;

                if (currentSlide === $slide.length) {
                    currentSlide = 1;
                    $slides.css('margin-left', 0);

                }
                //remove the class current from the element you added it previously
                $('.slide').removeClass('current');
                //add the class current by selecting the right element using the loop variable that stores the slide number
                $('.slide-'+currentSlide).addClass('current');

                //hide the h4 you previously fadeIn
                $('.slide h4').hide();
                //fadeIn the current slide h4
                $('.current h4').fadeIn();
            });

        }, pause);

});

大概是这样的：

.slide h4 {
    display:none;
}       

    $(document).ready(function(){
        var width = 550;
        var speed = 1000;
        var pause = 3000;
        var currentSlide = 1;
        var $slider = $(".slider");
        var $slides = $slider.find('.slides');
        var $slide = $slider.find('.slide');
        $slide.first().addClass('current');

        //fade in the first slide h4
        $('.current h4').fadeIn();


        setInterval(function(){

            $slides.animate({'margin-left': '-='+ width}, speed, function(){

                currentSlide++;

                if (currentSlide === $slide.length) {
                    currentSlide = 1;
                    $slides.css('margin-left', 0);

                }
                //remove the class current from the element you added it previously
                $('.slide').removeClass('current');
                //add the class current by selecting the right element using the loop variable that stores the slide number
                $('.slide-'+currentSlide).addClass('current');

                //hide the h4 you previously fadeIn
                $('.slide h4').hide();
                //fadeIn the current slide h4
                $('.current h4').fadeIn();
            });

        }, pause);

});