Fading Latest News Ticker

Question

Sto cercando di ottenere il modo più efficiente per produrre un ticker delle ultime notizie.

Ho un ul che può contenere qualsiasi numero di li 's e tutto quello necessario per eseguire il ciclo di loro dissolvenza in uno, tenendolo per 5 secondi e poi dissolvenza fuori, uno li alla volta. L'elenco viene visualizzato con un'altezza di 40px da li e il pozzetto in cui è visualizzato è anche 40px che con overflow: hidden produce l'effetto desiderato. Inoltre, è possibile tenere in posizione il li se il cursore si posiziona su di esso mentre è in corso la sua visualizzazione sarebbe bello crearlo.

So che c'è il plug-in di jQuery ticker che è ampiamente utilizzato (ala il vecchio stile BBC) ma ho provato ad usarlo e sembra così ingombrante per la semplicità di cui ho bisogno e gioca scompiglio con lo stile che uso .

Sto usando questo finora:

function tickOut(){ 
     $('#ticker li:first').animate({'opacity':0}, 1000, function() { 
      $(this).appendTo($('#ticker')).css('opacity', 1); }); 

    } 

    setInterval(function(){ tickOut() }, 5500); 

Ma in realtà non svanisce nel prossimo li quindi l'effetto è un po 'disordinato.

Se qualcuno potrebbe suggerire alcune alternative per contribuire a produrre l'effetto di cui ho bisogno sarebbe così utile.

Grazie

Answer 1

hide() e chiamare fadein() l'elemento dopo che diventa cima alla lista.

function tickOut(){ 
     $('#ticker li:first').animate({'opacity':0}, 1000, function() { 
      $(this).appendTo($('#ticker')) 
      $('#ticker li:first').hide() 
      $('#ticker li:first').fadeIn(1000) 
       $('#ticker li:not(:first)').css('opacity', '1') 
     }); 
    } 

setInterval(function(){ tickOut() }, 5500); 

vedi:

http://codepen.io/anon/pen/lHdGb

Answer 2

ho merion farlo così:

function tickOut(){ 
    $('#ticker li:first').animate({'opacity':0}, 1000, function() { 
      $(this).appendTo($('#ticker')).css('opacity', 1); }); 
    } 
var interval; 
$(function() { 
    interval = setInterval(function(){ tickOut() }, 5500); 
    $('#ticker').hover(function() { 
      if(interval) 
       clearInterval(interval); 
      $('#ticker li:first').stop(); 
      $('#ticker li:first').css('opacity', 1).stop(); 
     }, function(){ 
      interval = setInterval(function(){ tickOut() }, 5500); 
      }); 
}); 

Vedi $('#ticker').hover che cancella l'intervallo e si ferma l'animazione e restituisce opacity-1 quando il mouse ha dentro UL (può essere modificato per farlo quando solo qualche elemento speciale all'interno di LI è unde r mouse) e lo riavvia una volta lasciato il codice UL. Demo: http://jsfiddle.net/KFyzq/6/