Einfache verblassende Divs mit JS

Question

ich habe:

var t_out; 
    var idx = 0; 

    function cycleReviews() { 
     clearTimeout(t_out); 
     t_out = setTimeout(function() { 
      console.log(idx) 
      $('#review_' + idx).animate({opacity: '0'}, function() { 
       $('#review_' + idx).addClass('hide'); 

       $('#review_'+ (idx+1)).css('opacity', '0.0').removeClass('hide').animate({opacity: '1.0'}); 
       idx++; 
      }); 
      if(idx == 2) { 
       console.log('reload') 
       idx = -1; 
      } 
      cycleReviews(); 
     }, 2000); 
    } 

Um durch drei divs, ihnen einen zum anderen verblassen.

Ich habe Probleme, es richtig zu funktionieren, wenn es neu startet (geht zurück zur ersten Folie, idx 0).

Wie kann ich das richtig funktionieren lassen?

---

Fiddle:

'use strict'; 
 

 
var obj = [{'id': 0, 'review': 'Test1', 'author': 'Bob1'},{'id': 1, 'review': 'Test2', 'author': 'Bob2'},{'id': 2, 'review': 'Test3', 'author': 'Bob3'}]; 
 

 
$(function() { 
 
      var html = ''; 
 
      var first = true; 
 
      $.each(obj, function (i, v) {   
 
       html += '<div id="review_' + i + '" class="review ' + (first ? '' : 'hide') + '">'; 
 
       html += '<p>' + v.review + '</p>'; 
 
       html += '<p class="small">' + v.author + '</p>'; 
 
       html += '</div>'; 
 
       first = false; 
 
      }) 
 
      $('#review_container').html(html); 
 
      cycleReviews(); 
 

 
    var t_out; 
 
    var idx = 0; 
 

 
    function cycleReviews() { 
 
     clearTimeout(t_out); 
 
     t_out = setTimeout(function() { 
 
      console.log(idx) 
 
      $('#review_' + idx).animate({opacity: '0'}, function() { 
 
       $('#review_' + idx).addClass('hide'); 
 

 
       $('#review_'+ (idx+1)).css('opacity', '0.0').removeClass('hide').animate({opacity: '1.0'}); 
 
       idx++; 
 
       if(idx == 2) { 
 
        console.log('reload') 
 
        idx = 0; 
 
       } 
 
       cycleReviews(); 
 
      }); 
 

 

 
     }, 2000); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container text-center home-2"> 
 
        <h1 class="hero">Customer Reviews</h1> 
 
        <div class="bullets"><span id="bullet_1">&#8226;</span> <span id="bullet_2">&#9702;</span> <span id="bullet_3">&#9702;</span></div> 
 
        <div id="review_container"> 
 
        </div> 
 
        <p class="green">A happy client</p> 
 
       </div>

Answer 1

Sie sind die Dinge ein wenig dort overcomplicating. Ich habe kleine Änderungen an Ihrem Code vorgenommen - den Index als Zyklusparameter hinzugefügt, ihn so geändert, dass Sie nicht nach dem vorherigen Element suchen müssen, um ihn auszublenden, sondern alle Elemente ausblenden und nur den Index anzeigen, der schwer entfernt wurde -codierte Anzahl der Elemente, usw. Hier ist sie:

'use strict'; 
 

 
var obj = [{'id': 0, 'review': 'Test1', 'author': 'Bob1'},{'id': 1, 'review': 'Test2', 'author': 'Bob2'},{'id': 2, 'review': 'Test3', 'author': 'Bob3'}]; 
 

 
$(function() { 
 
      var html = ''; 
 
      var first = true; 
 
      $.each(obj, function (i, v) {   
 
       html += '<div id="review_' + i + '" class="review ' + (first ? '' : 'hide') + '">'; 
 
       html += '<p>' + v.review + '</p>'; 
 
       html += '<p class="small">' + v.author + '</p>'; 
 
       html += '</div>'; 
 
       first = false; 
 
      }) 
 
      $('#review_container').html(html); 
 
      cycleReviews(0); 
 

 
    var t_out; 
 

 
    function cycleReviews(idx) { 
 
     clearTimeout(t_out); 
 
     t_out = setTimeout(function() { 
 
      console.log(idx) 
 
      if(idx == obj.length) { 
 
        console.log('reload') 
 
        idx = 0; 
 
      } 
 
      $('.review').animate({opacity: '0'}, function() { 
 
       $('.review').addClass('hide'); 
 
       $('#review_'+ (idx)).css('opacity', '0.0').removeClass('hide').animate({opacity: '1.0'});     
 
       cycleReviews(idx+1); 
 
      }); 
 

 

 
     }, 2000); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container text-center home-2"> 
 
        <h1 class="hero">Customer Reviews</h1> 
 
        <div class="bullets"><span id="bullet_1">&#8226;</span> <span id="bullet_2">&#9702;</span> <span id="bullet_3">&#9702;</span></div> 
 
        <div id="review_container"> 
 
        </div> 
 
        <p class="green">A happy client</p> 
 
       </div>

Hinweis, kann dies noch weiter natürlich verbessert werden, aber das wird Ihnen den Einstieg.

---

Wie kann ich die cycleReviews Funktion schreiben würde:

'use strict'; 
 

 
var obj = [{'id': 0, 'review': 'Test1', 'author': 'Bob1'},{'id': 1, 'review': 'Test2', 'author': 'Bob2'},{'id': 2, 'review': 'Test3', 'author': 'Bob3'}]; 
 

 
$(function() { 
 
      var html = ''; 
 
      var first = true; 
 
      $.each(obj, function (i, v) {   
 
       html += '<div id="review_' + i + '" class="review ' + (first ? '' : 'hide') + '">'; 
 
       html += '<p>' + v.review + '</p>'; 
 
       html += '<p class="small">' + v.author + '</p>'; 
 
       html += '</div>'; 
 
       first = false; 
 
      }) 
 
      $('#review_container').html(html); 
 
      cycleReviews(0); 
 

 
    function cycleReviews(idx) { 
 
      $('.review').addClass('hide'); 
 
      setTimeout(function(){ 
 
       $('#review_'+ idx).removeClass('hide'); 
 
       setTimeout(function(){ 
 
        cycleReviews((idx+1) % obj.length); 
 
       }, 1500); 
 
      }, 500); 
 

 
    } 
 
});

.review {opacity: 1; transition: opacity 0.5s linear} 
 
.hide {opacity: 0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container text-center home-2"> 
 
        <h1 class="hero">Customer Reviews</h1> 
 
        <div class="bullets"><span id="bullet_1">&#8226;</span> <span id="bullet_2">&#9702;</span> <span id="bullet_3">&#9702;</span></div> 
 
        <div id="review_container"> 
 
        </div> 
 
        <p class="green">A happy client</p> 
 
       </div>

Answer 2

ich es sauber mag, ohne nutzlos IDs und Sachen,
mit klickbare (und automatisch generiert) Kugeln
und sogar mit einer Pause auf schweben:

var obj = [{'id': 0, 'review': 'Test1', 'author': 'Bob1'},{'id': 1, 'review': 'Test2', 'author': 'Bob2'},{'id': 2, 'review': 'Test3', 'author': 'Bob3'}]; 
 

 
$(function() { 
 

 
    var $reviewsContainer = $('#review_container'), 
 
     $bulletsContainer = $('.bullets'), 
 
     idx = 0, 
 
     slides = "", 
 
     bullets = "", 
 
     itv; 
 

 
    $.each(obj, function (i, v) {   
 
    slides += '<div><p>'+ v.review +'</p><p class="small">'+ v.author +'</p></div>'; 
 
    bullets += '<span></span>'; 
 
    }); 
 

 
    $reviewsContainer.append(slides); 
 
    $bulletsContainer.append(bullets); 
 

 
    slides = $reviewsContainer.find("> div"); 
 
    bullets = $bulletsContainer.find("> span").on("click", function(){ 
 
       idx = $(this).index(); 
 
       showSlideIdx(); 
 
      }); 
 

 
    function showSlideIdx() { 
 
    slides.removeClass("active").eq(idx).addClass("active"); 
 
    bullets.removeClass("active").eq(idx).addClass("active"); 
 
    idx = ++idx % obj.length; 
 
    } 
 

 
    function play() { itv = setInterval(showSlideIdx, 2000);} 
 
    function stop() { clearInterval(itv); } 
 

 
    $(".container").hover(stop, play); 
 
    showSlideIdx(); // the first ones 
 
    play();   // START! 
 

 
});

#review_container{ 
 
    position:relative; 
 
    height:100px; 
 
} 
 
#review_container > div{ 
 
    position:absolute; 
 
    visibility: hidden; 
 
    opacity:0; 
 
    transition: 0.8s; 
 
    -webkit-transition: 0.8s; 
 
} 
 
#review_container > div.active{ 
 
    visibility: visible; 
 
    opacity:1; 
 
} 
 
.bullets span{ font-size:50px; cursor:pointer; } 
 
.bullets span.active:after{content: "•";} 
 
.bullets span:after  {content: "◦";}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container text-center home-2"> 
 
    <div class="bullets"></div> 
 
    <div id="review_container"></div> 
 
    <p class="green">Hover to pause!</p> 
 
</div>