jQueryはdiv内のpタグの.fadeInと.fadeOutを一度に1つずつ返します

以下のコードは、1回の評価で6秒間フェードし、3秒間待ってからフェードアウトして次のフェーズに移動します。それが第3の証言に達すると、それは最初のものに戻る。これはまさに私が欲しいものですが、私の実際のサイトで私は3つ以上の栄誉を持っており、将来的にはもっと多くを追加するかもしれません。新しい証言を追加するたびに新しい機能を追加する必要はありません。私はこれを "this"と.next（）を使って動作させるのにしばらく時間をかけましたが失敗しました。誰かがこれをもっと効率的にするためには、ループを繰り返し、毎回新しい関数を呼び出すことなくコンテナ内の次のpタグに移動させることで効率を上げることを望んでいます。どんな助けもありがとう、ありがとう。jQueryはdiv内のpタグの.fadeInと.fadeOutを一度に1つずつ返します

注：同様の質問がありますが、どれも全く同じではなく、回答はサブアドレスであることがわかります。

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<style> 
#tml-container p { display: none; } 
</style> 
</head> 
<body> 

<div id="tml-container"> 
    <p id="one">Testimonial 1</p> 
    <p id="two">Testimonial 2</p> 
    <p id="three">Testimonial 3</p> 
</div> 

<script> 
$(document).ready(function() { 
    function doFade() { 
     $("#one").fadeIn(6000,function() { 
      $("#one").fadeOut(6000).delay(3000); 
      setTimeout(fadeTwo,6000); 
     }); 
    } 

    function fadeTwo() { 
     $("#two").fadeIn(6000,function() { 
      $("#two").fadeOut(6000).delay(3000); 
      setTimeout(fadeThree,6000); 
     }); 
    } 

    function fadeThree() { 
     $("#three").fadeIn(4000,function() { 
      $("#three").fadeOut(6000).delay(3000); 
      setTimeout(doFade,6000); 
     }); 
    } 
    doFade(); 
}); 
</script> 

</body> 
</html>

出典

2011-12-23 Justin

を助け、私は '$（「P」）を使用して要素を隠すことをお勧めして非表示（）;'なしでユーザーに表示内容を維持するためにフォールバックとしてのjQuery。 – mike

これは非常にシンプルなソリューションです：

function fade($ele) { 
    $ele.fadeIn(6000).delay(3000).fadeOut(6000, function() { 
     var $next = $(this).next('p'); 
     // if there is a following `p` element, it is faded in 
     // otherwise start from the beginning by taking 
     // the parent's first child 
     fade($next.length > 0 ? $next : $(this).parent().children().first()); 
    }); 
}; 

fade($('#tml-container > p').first());

DEMO

再利用可能なプラグインのバージョン：

代わりの特定の要素の子要素を反復処理、それは選択された要素。

(function($) { 
    var default_config = { 
     fadeIn: 3000, 
     stay: 3000, 
     fadeOut: 3000 
    }; 

    function fade(index, $elements, config) { 
     $elements.eq(index) 
      .fadeIn(config.fadeIn) 
      .delay(config.stay) 
      .fadeOut(config.fadeOut, function() { 
       fade((index + 1) % $elements.length, $elements, config); 
      }); 
    } 

    $.fn.fadeLoop = function(config) {  
     fade(0, this, $.extend({}, default_config, config)); 
     return this; 
    }; 

}(jQuery));

として使用可能：

$('#tml-container > p').fadeLoop({fadeIn: 6000, stay: 3000, fadeOut: 6000});

DEMO

出典

2011-12-23 13:08:47

*非常に*良い答え！特にプラグインのもの。素晴らしい、素晴らしいことがここで起こっている。 – Purag

魅力的な作品です！そのjsFiddleデモも素晴らしいです。前にそのサイトを見たことはありません。答える時間を取ってくれたことで大いに感謝しますが、あなたや他の誰かが次の行を説明する気にならないならば、 fade（$ next.length> 0？$ next：$（this）.parent（）。children（）。first（））; – Justin

@Justin：プラグインのバージョンを使用することを検討してください。これは、再利用が簡単で、HTML構造の変更が起こりにくいためです。私はその行に関するいくつかのコメントを追加します。 'x？ y：z'構造体は*条件演算子*です。 'x'が真であれば' y'を返し、そうでなければ 'z'を返します。 '$ next.length'は' $（this）.next（ 'p'） 'によっていくつの要素が選択されたかを示します。どれも選択されていなければ、 'p'要素がなく、最初から続ける必要があるので、代わりに親の最初の子を取る。これは、最初の子が実際にフェードインしたい次の子であることを前提としています（例では –

自己を変更し、あなたの要件を満たすためにプラグインを開発し、は、しかし、完全にそれをテストしていません。

少なくとも、このような設定を適切に行う必要があります。

希望、これはあなたがjQueryのを使用している間:)

(function($){ 
    $(function(){ 
     $('#tml-container').testimonialFader(); 
    }); 

    $.fn.testimonialFader = function(){ 
     return this.each(function(){ 
      var $par = $(this), 
      $testimonials = $par.children('p'), 
      $current = $testimonials.first(); 

      $testimonials.not(':first').hide(); 

      $testimonials.on('testimonialReady.testimonialFader', wait); 
      $testimonials.on('waitComplete.testimonialFader', showNext); 

      $current.trigger('testimonialReady.testimonialFader'); 

      function wait(e){ 
       $current.trigger('waitStart.testimonialFader'); 
       setTimeout(
        function(){ 
          $current.trigger('waitComplete.testimonialFader'); 
         }, 
         6000 
       ); 
      } 
      function showNext(){ 
       $current.trigger('testimonialChange.testimonialFader'); 
       if($testimonials.length > 1){ 
        var $next = $current.next(); 
        if($next.length == 0){ 
         $next = $testimonials.first(); 
        } 
        $current.fadeOut(800); 
        $next.fadeIn(800, 
         function(){ 
          $next.trigger('testimonialReady.testimonialFader'); 
         } 
        ); 
        $current = $next; 
       } 
      } 

     }); 
    }; 
}(jQuery));

出典

2011-12-23 13:09:06

jQueryはdiv内のpタグの.fadeInと.fadeOutを一度に1つずつ返します

答えて

関連する問題