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:
<div id="ticker"> </div> <script type="text/javascript"> var newsitems; var curritem=0; $(document).ready(function(){ newsitems = $("#ticker span").hide().size(); $("#ticker span:eq("+curritem+")").show(); setInterval(ticknews,5000); //time in milliseconds }); function ticknews() { $("#ticker span:eq("+curritem+")").hide(); curritem = ++curritem%newsitems; $("#ticker span:eq("+curritem+")").show(); } </script>
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ć

Próbowałem:
<script type="text/javascript"> var newsitems; var curritem=0; $(document).ready(function(){ newsitems = $("#ticker span").fadeOut("slow").size(); $("#ticker span:eq("+curritem+")").fadeIn("slow"); setInterval(ticknews,100); //time in milliseconds }); function ticknews() { $("#ticker span:eq("+curritem+")").fadeout("slow"); curritem = ++curritem%newsitems; $("#ticker span:eq("+curritem+")").fadeIn("slow"); } </script>
Ale nie działa.
Edit:
<script type="text/javascript"> var newsitems; var curritem=0; $(document).ready(function(){ newsitems = $("#ticker span").fadeOut("slow").hide().size(); $("#ticker span:eq("+curritem+")").fadeIn("slow").show(); setInterval(ticknews,3000); //time in milliseconds }); function ticknews() { $("#ticker span:eq("+curritem+")").fadeOut("slow").hide(); curritem = ++curritem%newsitems; $("#ticker span:eq("+curritem+")").fadeIn("slow").show(); }</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?