Question

我正在尝试使用jQuery制作幻灯片，但是当我按下下一个箭头时，下一张幻灯片会在前一张幻灯片完全淡出之前淡入。有没有人有解决这个问题的方法？

<html>
    <head>
        <style>
            #mainWrapper{
                padding:10px 0 10px 0;
                width:960px;
                border:1px solid grey;
                margin:auto;
            }
            #jumbotron{
                height:400px;
                width:500px;
                margin:auto;
            }
            .slide{
                width:400px;
                margin:auto;
                margin-top:100px;
                display:none;
            }
            .active-slide{
                display:block;
            }
            .dots{
                list-style-type:none;
                margin:0;
                padding:0;
            }
            .dot{
                float:left;
                margin:0 10px 0 10px;
                color:rgb(214,214,214);
            }
            .active-dot{
                color:black;
            }
            .arrow-prev,.arrow-next,.dots{
                float:left;
                margin:0 20px 0 20px;
            }
            .slider-nav{
            margin-top:10px;
                position:relative;
                left:125px;
            }
            .large{
                height:200px;
                width:400px;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <head>
    <body>
        <div id ="mainWrapper" >
            <div id="jumbotron">
            <div class="">
                <div class="slide active-slide">
                    <img src="desert.jpg" alt="desert" class="large"/>
                </div>
                <div class="slide">
                    <img src="tulips.jpg" alt="tulips" class="large"/>
                </div>
                <div class="slide">
                    <img src="penguins.jpg" alt="penguins" class="large"/>
                </div>
                </div>
                <div class="slider-nav">
                    <a href="#" class="arrow-prev">
                        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
                    </a>

                    <ul class="dots">
                        <li class="dot active-dot">&bull;</li>
                        <li class="dot">&bull;</li>
                        <li class="dot">&bull;</li>
                    </ul>

                    <a href="#" class="arrow-next">
                        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
                    </a>
                </div>
            </div>
        </div>

        <script>
            $(document).ready(function(){
                $('.arrow-next').click(function(){
                    var currentSlide = $('.active-slide');
                    var nextSlide = currentSlide.next();

                    if (nextSlide.length === 0) {
                        nextSlide = $('div.slide').first();
                    }
                    currentSlide.fadeOut(600).removeClass('active-slide');
                    nextSlide.fadeIn(600).addClass('active-slide');

                })
            })
        </script>
    </body>
</html>

Answer 1

那是因为你在同一时间调用fadeOut和fadeIn。你应该在fadeOut完成时调用fadeIn＆＃34;淡出＆＃34;。

currentSlide.fadeOut(600, function(){
    nextSlide.fadeIn(600);
});

Answer 2

重点在于：

currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');

您应该将第二个动画作为第一个动画的回调，以便仅在第一个动画完成后运行。将其更改为：

currentSlide.fadeOut(600).removeClass('active-slide', function(){
    nextSlide.fadeIn(600).addClass('active-slide')
});

这应该可以按预期工作。

jQuery褪色幻灯片表现得很有趣

2 个答案: