用animate（）替换fadeIn / fadeOut以平滑地向左滑动

Question

我是jquery的新手，想要从右到左旋转一个div，但是不能完全移动它但是我尝试了fadeOut / fadeIn来看看，有人可以帮我编辑我的代码{{ 3}}

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

Answer 1

您接近使用的方法。你需要做的唯一工作就是等待fadeOut动画结束。只需使用回调，当动画结束时，可以调用回调。

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

Answer 2

你没有顺利过渡，因为在jquery在一个div中消失并且同时淡出其他div的时期，两个div都存在，由此父分区的高度发生变化。
你必须为它做一些工作：

＆＃13;

＆＃13;

$(function () {
    $('.slideshow div').hide(); // hide all slides
    $('.slideshow div:first-child').show(); // show first slide
	var time = 2000;
    setInterval(function () {
		$('.slideshow div:first-child')
            .fadeOut(time).addClass("ignoresize")
            .next('div').fadeIn(time).removeClass("ignoresize")
            .end().appendTo('.slideshow');
        },
    time + 1000); // slide duration
});

＆＃13;

* {
    margin: 0px;
}
.slideshow {
	position:relative;
	background-color:#999;
}
#slide1{
    background-color:#ff00ee;    
}
#slide2{
    background-color:#eeff00;    
}
#slide3{
    background-color:#00eeff;    
}
.ignoresize {
	position: absolute;
	z-index: 10;
	width: 100%;
	top: 0px;
	bottom: 0px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：
以下是从右到左动画分割的方法。

＆＃13;

＆＃13;

$(function () {
    $('.slideshow div').hide(); // hide all slides
    $('.slideshow div:first-child').show(); // show first slide
	var time = 2000;
    setInterval(function () {
		$slidea = $('.slideshow div:first-child');
		$slideb = $slidea.next();
		width = $('.slideshow div:first-child').width();
		$('.slideshow div:first-child').addClass("ignoresize")
			.animate({left: width}, time).hide(0)
			.next().removeClass("ignoresize").show(0)
			.css("left", 0).end().appendTo(".slideshow");
        },
    time + 1000); // slide duration
});

＆＃13;

* {
    margin: 0px;
}
.slideshow {
	position:relative;
	background-color:#999;
	overflow: hidden;
}
#slide1{
    background-color:#ff00ee;    
}
#slide2{
    background-color:#eeff00;    
}
#slide3{
    background-color:#00eeff;    
}
.ignoresize {
	position: absolute;
	z-index: 10;
	width: 100%;
	top: 0px;
	bottom: 0px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;