テキストループをフェードイン＆アウトする - jQuery

jQueryを使用してフェードインとフェードアウトしたいH2タグに2つの引用符がラップされています。ページが読み込まれたら、最初の引用をフェードインしたい、数秒間遅らせ、次の引用をフェードアウトして同じことをする。私はそれを2つの引用符で繰り返していきたいと思います。どんな助けでも大歓迎です。テキストループをフェードイン＆アウトする - jQuery

出典

2012-08-22 Tyler Almond

あなたはこのようにそれを行うことができます：

CSS：

.quotes {display: none;}

HTML：

<h2 class="quotes">first quote</h2> 
<h2 class="quotes">second quote</h2>

Javascriptを：

// code gets installed at the end of the body (after all other HTML) 
(function() { 

    var quotes = $(".quotes"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(2000) 
      .delay(2000) 
      .fadeOut(2000, showNextQuote); 
    } 

    showNextQuote(); 

})();

の作業のデモ：http://jsfiddle.net/jfriend00/n4mKw/

このコードは、2つではなく、任意の数の引用符で機能します。引用符の後に内容がある場合は、引用符が入っているコンテナのサイズを修正して、ある引用符から次の引用符に移動するときにサイズが変わらないようにする必要があります（他のページの内容がジャンプします）。

出典

2012-08-22 01:45:43 jfriend00

スクリプトを追加すると、マイページが空になります。私は読み込まれていないページに他のアイテムがたくさんある。 –

@タイラーアーモンド - あなたが何をしたのか分からないときに、どうやってその質問を手伝ってくれるのですか？明らかに、何らかの種類のスクリプトやHTMLエラーがあります。あなたが行ったことへのリンクを投稿するか、エラーコンソールでエラーを確認して修正することができます。このコンセプトは、適切に実行されると機能します。参考までに、上記のスクリプトは、ページの「」セクションの末尾にある「

これは、上記のスクリプトを動作させるために必要なものです。まず、あなたが良いと考えjQueryのフレームワークを参照し、そのいずれかの他のすべての要素の後<head>セクション、または<body>タグの終わりに、このスクリプトタグを追加する必要があります。そして、

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

メイン上記の<script>タグの後にJavaScriptを読み込まなければなりません：

<script type="text/javascript"> 
(function() { 

    var quotes = $(".quotes"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(2000) 
      .delay(2000) 
      .fadeOut(2000, showNextQuote); 
    } 

    showNextQuote(); 

})(); 
</script>

出典

2013-10-30 09:10:09 Kudzai

テキストループをフェードイン＆アウトする - jQuery

答えて

関連する問題