javascript - 用animate()替换fadeIn/fadeOut使其向左滑动

我是jquery新手，想从右向左旋转div，但无法完全移动它，但是我尝试了fadeOut / fadeIn只是看一下，有人可以帮我在http://jsfiddle.net/nAaMV/831/上编辑代码吗？

$(function () {
            $('.slideshow div').hide(); // hide all slides
            $('.slideshow div:first-child').show(); // show first slide
            setInterval(function () {
                        $('.slideshow div:first-child').fadeOut(200)
                                .next('div').fadeIn(200)
                                .end().appendTo('.slideshow');
                    },
                    5000); // slide duration
});

#slide1{
    background-color:#ff00ee;
}
#slide2{
    background-color:#eeff00;
}
#slide3{
    background-color:#00eeff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slideshow">
        <div id="slide1">
            <p class="quote">Quote One</p>
            <p class="credit">Person One</p>
        </div>
        <div id="slide2">
            <p class="quote">Quote Two</p>
            <p class="credit">Person Two</p>

        </div>
        <div id="slide3">
            <p class="quote">Quote 3</p>
            <p class="credit">Person 3</p>

        </div>
    </div>

最佳答案

您已接近所使用的方法。您需要做的唯一一件事就是等待fadeOut动画结束。只需使用回调，动画结束时，将调用with。

$(function () {
    $('.slideshow div').hide(); // hide all slides
    $('.slideshow div:first-child').show(); // show first slide
    setInterval(function () {
        $('.slideshow div:first-child').fadeOut(200, function () {
            $(this).next('div').fadeIn(400).end().appendTo('.slideshow');
        })
    },
    1000); // slide duration
});

Demo

关于javascript - 用animate()替换fadeIn/fadeOut使其向左滑动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31227707/