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:
<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();
}
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ć (IMG:
style_emoticons/default/winksmiley.jpg)
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");
}
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();
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?
Ten post edytował Dapi 26.09.2010, 14:18:36