-2

私はこのようなものを持っています

<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コードを半分理解できることに注意してください。

4

1 に答える 1

2

ワーキングデモ

これを試して、

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);
于 2013-10-03T18:09:28.113 に答える