JQuery Rotating Texte

Question

J'ai un texte que je dois tourner, c'est ce que j'ai maintenant:

> <div id="facts"> 
>   <blockquote class="fact visible"> 
>   xxx 
>   </blockquote> 
>   <blockquote class="fact"> 
>   yyy 
>   </blockquote> 
>   <blockquote class="fact"> 
>    zzz 
>   </blockquote> 
>   <blockquote class="fact"> 
>   ooo 
>   </blockquote> 
>  </div> 

et mon jquery est comme ceci:

$(document).ready(function() { 

$("div#facts").height(factMaxHeight); 

    setTimeout("rotateSlide()",7000);  
}); 
............. 

$('blockquote.fact').each(function() { 
     if($(this).hasClass('visible')) { 
      $(this).fadeOut(5000,function() { 
       $(this).removeClass('visible'); 
       $(this).next().setVis 
      }); 
     }//if 
     else { 
      $(this).fadeIn(5000,function() { 
       $(this).addClass('visible'); 
      }); 
     } 
    }); 
    setTimeout("rotateSlide()",7000); 

so ... xxx show Je vais bien, mais ensuite, je vois tous les autres 3, yyy, zzz et ooo superposés les uns au-dessus des autres, ça ne se fait pas un par un, aidez-moi à comprendre cela.

Merci!

Answer 1

Changer votre jQuery chaque:

$('blockquote.fact').each(function() { 
    if($(this).hasClass('visible')) { 
     $(this).fadeOut(5000,function() { 
      $(this).removeClass('visible'); 
      $(this).next().setVis 
     }); 
     if($(this).next().size()) { 
      $(this).next().fadeIn(5000,function() { 
       $(this).addClass('visible'); 
      }); 
     } else { 
      $(this).parent().children().first().fadeIn(5000,function() { 
       $(this).addClass('visible'); 
      }); 
     } 
     return false 
    } 
}); 

Answer 2

Le problème est que nous parcourons tous les faits à la fois. Que diriez-vous simplement ceci:

$('blockquote.fact.visible').each(function() { 
    $(this).fadeOut(5000, function() { 
     $(this).removeClass('visible'); 

     var next = $(this).next(); 
     if (next.length == 0) 
      next = $('blockquote.fact:first'); // If we're at the end of the list, go back to the first one. 

     next.addClass('visible').fadeIn(5000); 
    }); 
}); 
setTimeout(rotateSlide, 7000); 

En aparté, s'il vous plaît ne pas utiliser la notation hideuse "rotateSlide()" pour setTimeout. Passez simplement la fonction que vous souhaitez appeler, comme indiqué ci-dessus.