div内のコンテンツをjqueryで自動再生

Question

私は、タブをクリックせずに表示したい別のdiv内にいくつかのコンテンツを持っています。私はクリックすることでこれらのコンテンツの可視性を切り替えることができましたが、jqueryを使用してループ内に自動的に表示することを本当に好むでしょう。以下は私のコード

$(document).ready(function(){ 
 
     $('#advantages').click(function(){ 
 
     $('#featureContent').fadeOut(400).addClass('hidden'); 
 
     $('#advantageContent').fadeIn(400).removeClass('hidden'); 
 
     $('#benefitsContent').fadeOut(400).addClass('hidden'); 
 
     }); 
 

 
     $('#benefits').click(function(){ 
 
      $('#featureContent').fadeOut(400).addClass('hidden'); 
 
      $('#advantageContent').fadeOut(400).addClass('hidden'); 
 
      $('#benefitsContent').fadeIn(400).removeClass('hidden'); 
 
     }); 
 

 
     $('#features').click(function(){ 
 
     $('#featureContent').fadeIn(400).removeClass('hidden'); 
 
     $('#advantageContent').fadeOut(400).addClass('hidden'); 
 
     $('#benefitsContent').fadeOut(400).addClass('hidden'); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="featureLinks" class="col-lg-6 col-md-6 col-sm-6"> 
 
      <ul class="text-center"> 
 
       <li id="features"> Smart travel </li> 
 
       <li id="advantages"> Smart route </li> 
 
       <li id="benefits"> Smart payment </li> 
 
      </ul> 
 
     </div> 
 

 
    <div id="featureContent" class="col-lg-6 col-md-6 col-sm-6"> 
 
      <h2 class="text-center"> Smart travel </h2> 
 
      <ul> 
 
       <li>All your favourite transit service providers like Uber, KLM, Great Western Rail and Blue Star Ferries on one integrated app! </li> 
 
       
 
       <li>Compare the availability, price and ETA for taxis/buses, flights, metro andferries, anytime and anywhere. 
 
       </li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="advantageContent" class="col-lg-6 col-md-6 col-sm-6 hidden"> 
 
     <h2 class="text-center"> Smart Route </h2> 
 
      <ul> 
 
       <li> Big data is finally at your service</li> 
 
      <li>Go where you&#39;ve never gone before with integrated Satellite navigation system.</li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="benefitsContent" class="col-lg-6 col-md-6 col-sm-6 hidden"> 
 
     <h2 class="text-center"> Smart Payment </h2> 
 
      <ul> 
 
       <li> Experience the ease and security of paying via the app. </li> 
 
     </ul> 
 
</div>

Answer 1

ここ@Yemmyがあり、それはあなたのように表示されるようにするには、遅延を編集する必要がありますI = 10になるまでこれらのアニメーションの上にこの意志ループ10回簡単な例でありますいいね。

$(document).ready(function(){ 
      var i = 0; 
     while (i < 10){ 
     $('#featureContent').fadeOut(400).addClass('hidden').delay(400); 
     $('#advantageContent').fadeIn(400).removeClass('hidden').delay(400); 
     $('#benefitsContent').fadeOut(400).addClass('hidden').delay(400); 



      $('#featureContent').fadeOut(400).addClass('hidden').delay(400); 
      $('#advantageContent').fadeOut(400).addClass('hidden').delay(400); 
      $('#benefitsContent').fadeIn(400).removeClass('hidden').delay(400); 



     $('#featureContent').fadeIn(400).removeClass('hidden').delay(400); 
     $('#advantageContent').fadeOut(400).addClass('hidden').delay(400); 
     $('#benefitsContent').fadeOut(400).addClass('hidden').delay(400); 
     i++ 
     }; 
    }); 

フィドル：https://jsfiddle.net/nn4hgrv2/#&togetherjs=kcgRhDRIGb

Answer 2

あなたはタイマーに、非同期的に、繰り返し関数を呼び出すためにwindow.setIntervalを使用することができます。私は下のスニペットに例を示しました。

$(document).ready(function(){ 
 
     var rotateElements = [ $('#featureContent'), $('#advantageContent'), $('#benefitsContent') ]; 
 
     var displayedIndex = 0; 
 

 
     window.setInterval(function() { 
 
     if (displayedIndex > rotateElements.length) displayedIndex = 0; 
 
      
 
     for (var i = 0; i < rotateElements.length; ++i) { 
 
      if (i == displayedIndex) 
 
      rotateElements[i].fadeIn(400).removeClass('hidden'); 
 
      else 
 
      rotateElements[i].fadeOut(400).addClass('hidden'); 
 
     } 
 
      
 
     displayedIndex++; 
 
     }, 3000); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="featureLinks" class="col-lg-6 col-md-6 col-sm-6"> 
 
      <ul class="text-center"> 
 
       <li id="features"> Smart travel </li> 
 
       <li id="advantages"> Smart route </li> 
 
       <li id="benefits"> Smart payment </li> 
 
      </ul> 
 
     </div> 
 

 
    <div id="featureContent" class="col-lg-6 col-md-6 col-sm-6"> 
 
      <h2 class="text-center"> Smart travel </h2> 
 
      <ul> 
 
       <li>All your favourite transit service providers like Uber, KLM, Great Western Rail and Blue Star Ferries on one integrated app! </li> 
 
       
 
       <li>Compare the availability, price and ETA for taxis/buses, flights, metro andferries, anytime and anywhere. 
 
       </li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="advantageContent" class="col-lg-6 col-md-6 col-sm-6 hidden"> 
 
     <h2 class="text-center"> Smart Route </h2> 
 
      <ul> 
 
       <li> Big data is finally at your service</li> 
 
      <li>Go where you&#39;ve never gone before with integrated Satellite navigation system.</li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="benefitsContent" class="col-lg-6 col-md-6 col-sm-6 hidden"> 
 
     <h2 class="text-center"> Smart Payment </h2> 
 
      <ul> 
 
       <li> Experience the ease and security of paying via the app. </li> 
 
     </ul> 
 
</div>