Witam.
Dziś rozpocząłem integrację mojej strony z jQuery. Do tej pory używałem 3 różnych bibliotek,
ale stwierdziłem, że z pomocą tej jednej osiągnę takie same efekty, a mniej bibliotek będę wczytywał.

Mam taki pasek newsów:

  1. <div id="ticker">
  2. <span>Informacja nr 1</span>
  3. <span>Informacja nr 2</span>
  4. <span>Informacja nr 3</span>
  5. </div>
  6.  
  7. <script type="text/javascript">
  8. var newsitems;
  9. var curritem=0;
  10.  
  11. $(document).ready(function(){
  12. newsitems = $("#ticker span").hide().size();
  13. $("#ticker span:eq("+curritem+")").show();
  14. setInterval(ticknews,5000); //time in milliseconds
  15.  
  16. });
  17.  
  18. function ticknews() {
  19. $("#ticker span:eq("+curritem+")").hide();
  20. curritem = ++curritem%newsitems;
  21. $("#ticker span:eq("+curritem+")").show();
  22.  
  23. }



Działa wszystko ładnie, ale chciałbym, żeby zanikanie i pojawianie sie newsów odbywało się
za pomocą ładnego efektu fadeOut("slow") i fadeIn("slow") . To mój drugi dzień zabawy z jQuery
więc prosiłbym o dość łopatologiczne wyjaśnienie jak to zrobić winksmiley.jpg

Próbowałem:
  1. <script type="text/javascript">
  2. var newsitems;
  3. var curritem=0;
  4.  
  5. $(document).ready(function(){
  6. newsitems = $("#ticker span").fadeOut("slow").size();
  7. $("#ticker span:eq("+curritem+")").fadeIn("slow");
  8. setInterval(ticknews,100); //time in milliseconds
  9.  
  10. });
  11.  
  12. function ticknews() {
  13. $("#ticker span:eq("+curritem+")").fadeout("slow");
  14. curritem = ++curritem%newsitems;
  15. $("#ticker span:eq("+curritem+")").fadeIn("slow");
  16.  
  17. }

Ale nie działa.


Edit:

  1. <script type="text/javascript">
  2. var newsitems;
  3. var curritem=0;
  4.  
  5. $(document).ready(function(){
  6. newsitems = $("#ticker span").fadeOut("slow").hide().size();
  7. $("#ticker span:eq("+curritem+")").fadeIn("slow").show();
  8. setInterval(ticknews,3000); //time in milliseconds
  9.  
  10. });
  11.  
  12. function ticknews() {
  13. $("#ticker span:eq("+curritem+")").fadeOut("slow").hide();
  14. curritem = ++curritem%newsitems;
  15. $("#ticker span:eq("+curritem+")").fadeIn("slow").show();
  16.  
  17. }</script>


Chyba działa, ale za szybko pokazuje się kolejny element i nie widać przejścia.
Da się to opóźnić o dajmy na to 300 milisekund?