2

次のコードがあります。

<div id="quotes">
    <p>"Quote 1."</p>
    <p>"Quote2!"</p>
    <p>"Quote3"</p>
    <p>"Etc"</p>
</div>

各引用を循環させる簡単な方法はありますか? など、またはプラグインを使用する必要がありますか?

4

4 に答える 4

5 
$('#quotes p').each(function(index){
    $(this).delay(index * 1000).fadeIn().fadeOut();
});

またはこのようなもの：

$('#quotes p').hide().each(function(index){
    $(this).delay(index * 1600).fadeIn().delay(750).fadeOut();
});​

ライブデモ

于 2012-05-18T09:03:19.227 に答える
0
  1. Q2、Q3 などの可視性を「非表示」のままにします。
  2. 最初の引用を表示する時間を遅らせてからコールバックすると、最初と 2 番目の引用の表示を切り替えることができます。フローのこのコールバック内で遅延とコールバックを繰り返します。
于 2012-05-18T09:05:53.717 に答える
0 
 $('#quotes').find('p').hide();   

 $('#quotes').find('p').each(function(i){
        $(this).prev().fadeOut('slow');
        $(this).fadeIn('slow');
    });
于 2012-05-18T09:05:57.457 に答える
0

別のオプションは、プラグインを使用することです。jQuery サイクル プラグインは素晴らしく、セットアップが非常に簡単です。

ワンライナーになります： $('#quotes').cycle()

デモ: http://jsfiddle.net/lucuma/HsWrC/1/

サイクル プラグイン: http://jquery.malsup.com/cycle/

参考(制御時間、アニメーションの種類など): http://jquery.malsup.com/cycle/options.html

于 2012-05-18T13:06:22.437 に答える