CODEWITHSUNDEEP
jqueryhtmlcss
Antny
Antny

Reputation: 39

jQuery fading slides acting funny

I am trying to make a slide with jQuery but when I press the next arrow, the next slide fades in before the previous one is fully faded out. Does anyone hae a solution for this problem?

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

Upvotes: 0

Views: 75

Answers (2)

Lelio Faieta
Lelio Faieta

Reputation: 6673

The point is here:

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

You should put the second animation as a callback of the first animation so that it will be run only after the first is completed. Change it to:

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

This should work as you expect.

Upvotes: 0

Naner
Naner

Reputation: 1292

That's because you are calling fadeOut and fadeIn at the same time. You should be calling fadeIn only when fadeOut is done "fading out".

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

Upvotes: 2

Related Questions