jquery - jQuery引用旋转器使用slideUp和slideDown

Question

我设置了一个报价旋转器，它一次显示两个报价，并且当它应该在每个报价之间平稳旋转时，它会在整个地方跳跃。我不知道出了什么问题。在这里查看它的实际效果 - http://jsfiddle.net/RF3xK/1/

代码如下，

<div id="quotes">
<div class="textItem">
    testing the quotes testing the quotes
</div>
<div class="textItem">
    asdfdsaf sdf sdf sdf sf sd fsdaf sdf sdaf sdfsd f ds f dsf asdfsdafdsaf asdfdsaf sdf sdf sdf sf sd fsdaf sdf sdaf sdfsd f ds f dsf asdfsdafdsaf
</div>  
<div class="textItem">
    and another one
</div> 

和 jQuery

$(document).ready(function() {
$('#quotes .textItem').hide();
InOut($('#quotes .textItem:first'));

function InOut(elem) {
elem.delay().slideUp(800).delay(0).slideDown(0, function() {
    if (elem.next().length > 0) {
        InOut($(this).next());
    }
    else {
        InOut($(this).siblings(':first'));
    }
});
}

$('#quotes .textItem').mouseover(function() {
$(this).stop(true, true);
});
$('#quotes .textItem').mouseout(function() {
if ($(this).is(":visible") == true) {
    InOut($(this));
}
});
});

Answer 1

我看不出用你写的方式来修复它，所以这里有一种不同的方法：

http://jsfiddle.net/tFHWf/2/

var InOutInterval;
$(document).ready(function() {
    var textItems = $('.textItem'), 
        i = 0,
        setInOut = function(){        
            clearInterval(InOutInterval);
            InOutInterval = setInterval(function(){        
                textItems.eq(i%textItems.length).slideUp();
                textItems.eq((i+1)%textItems.length).slideDown();
                i++
            }, 800);        
        },
        pauseInOut = function(){
            clearInterval(InOutInterval);
        };
    textItems.eq(0).show();
    setInOut();    
    $('#quotes').hover(pauseInOut,setInOut);
});