第一个过渡不平滑jQuery淡入/淡出

Question

我有一些循环遍历一系列 div 的 jQuery 代码。我有它，所以当前的 div 淡出，然后下一个 div 淡入它的位置。问题出在第一次转换时，可见的 div 并没有淡出，它只是消失了。在第一次过渡之后，其余的过渡是平滑的，具有适当的淡入/淡出运动。以下是 div 的示例：

<div id="testimonials">
    <div class="testimony current">
        <p>Text1</p>
    </div>
    <div class="testimony">
        <p>Text2</p>
    </div>
</div>

以下是用于过渡的 jQuery：

$(document).ready(function() {
    var cycle = window.setInterval(next, 6000);

    function next() {
        $('#testimonials .current').removeClass('current').fadeOut(500).next().add('#testimonials div:first').last().fadeIn(2000).addClass('current');
    }
});

你可以在http://jrubins.webfactional.com/tamid/vision.php看到尴尬的第一次转换

Answer 1

改变调用fadeOut()和removeClass()方法的顺序，试试这个：

function next() {
   $('#testimonials .current').fadeOut(500, function(){
       $(this).removeClass('current')
   }).next()...
}