javascript - 幻灯片更改后淡入对象

Question

我试图在 div 滑入 View 后淡入 h4 标签。我还想将“当前”类添加到 View 中的每张幻灯片。 fiddle http://jsfiddle.net/x8euhjrt/ .代码

<div class="slider">
    <div class="slides">
        <div class="slide slide-1">
        <h4>Slide 1</h4>

        </div>  
        <div class="slide slide-2">
            <h4>slide 2</h4>

        </div>  
        <div class="slide slide-3">
            <h4>slide 3</h4>

        </div>  
        <div class="slide slide-4">
            <h4>slide 4</h4>

        </div>  
        <div class="slide slide-1">
        <h4>Slide 1</h4>

        </div>
</div><!-- end homepage slider container -->

CSS:

    .slider{
    width: 550px;
    background: #d00d00;
    min-height: 385px;
    overflow: hidden;
}
.slides{
    width: 2750px;
    margin: 0;
}
.slide{
    position:relative;
    display: block;
    float: left;
    width: 550px;
    height:400px;
}
.slide-1{
    background:#dedede;
}
.slide-2{
    background:#999;
}
.slide-3{
    background:#333;
}
.slide-4{
    background:#555;
}
h4{
    background:#bada55;
    padding:15px 120px;
    display: inline-block;
    margin-top:30%;
    font-size:1.4em;
}

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

    });

Answer 1

查看演示 here .我修改了 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();
        });