javascript - 同一页面上的两个 jQuery 动画会导致不平滑的过渡

Question

我有这样的东西

<hgroup id="ticker">

<div>
 <h1>First <span>Div</span></h1>
 <h2>This is the First Div</h2>
 <h6>This is the First Heading</h6>
</div>

<div>
 <h1>Second <span>Div</span></h1>
 <h2>This is the Second Div</h2>
 <h6>This is the Second Heading</h6>
</div>

<!-- And so on -->

</hgroup>

我用

<script>
var $ticker = $('#ticker'); // save the static element
$ticker.children(':not(:first-child)').hide();

function tick(){
$ticker.children(':first-child').fadeOut(1000, function () {
    $(this).appendTo($ticker);
    $ticker.children().first().fadeIn(1000);
});
}
setInterval(tick, 8000);
</script>

它工作正常。没有问题。也许需要重构，但我只是弄脏了 jQuery。而且比我有

<div id="quote">
 <blockquote>This is the First quote<span class="dim"><strong>1</strong></span></blockquote>
 <blockquote>This is the First quote<span class="dim"><strong>1</strong></span></blockquote>
</div>

<!-- And so on -->

我用

<script>
var $quote = $('#quote');
$quote.children(':not(:first-child)').hide();

function tick(){
$quote.children(':first-child').slideUp(1000, function () {
    $(this).appendTo($quote);
    $quote.children().first().slideDown(1000);
});
}
setInterval(tick, 8000);
</script>

但是这样做是动画不流畅。淡入淡出和滑动暂停、恢复、闪烁，并且动画/过渡不平滑或不流畅。

任何没有其他作品的单个作品都可以，但在同一页面上放在一起会导致此问题。

另请注意，我可以理解上面的 jQuery 代码。

Answer 1

工作演示

尝试这个，

var $quote = $('#quote');
$quote.children(':not(:first-child)').hide();

function tick() {
    $quote.children(':first-child').stop().slideUp(1000, function () {
        $(this).appendTo($quote);
        $quote.children().stop().first().slideDown(1000);
    });
}
setInterval(tick, 8000);