News Ticker

[Deathlok92]

Salve,

ho creato un news ticker molto semplice, prende gli elementi da una lista e li mostra ad uno ad uno.

Ho notato che dopo il primo giro però cambia qualcosa, ovvero le news vengono spostate di qualche pixel più in basso...

Allego il codice e due screenshot

Codice HTML

<div id="ticker">
    <ul>
        <li>
            News1
        </li>
        <li>
            news2
        </li>
        <li>
            news3
        </li>
        <li>
            news4
        </li>
    </ul>
</div>

Codice CSS:

#ticker 
    {
        height: 40px;
        overflow: hidden;
        text-align:center;
        
    }
    


    #ticker li 
    {
        list-style:none;
        height: 40px;
        
    }

Codice JS

function tick()
{
    $('#ticker li:first').slideUp( function () { $(this).appendTo($('#ticker')).slideDown(); });
}
setInterval(function(){ tick (); }, 5000);

Chiedo scusa nel caso fosse la sezione sbagliata, visto che il problema si presenta al secondo giro ho ipotizzato sia un problema di JS, ma potrebbe essere anche molto probabilmente di CSS.

E infine gli screenshot

Primo giro



Secondo giro



Come potete notare nella seconda immagine la scritta "News1" è molto più vicina alla linea... anche se non capisco perchè...

Grazie in anticipo

[cavicchiandrea]

Metti un link alla pagina pubblica, con le immagine oltre a capire poco mancano possibili errori

[Deathlok92]

Al momento il sito è totalmente in locale, creo una cosa estremamente minimale e vedo di hostarla da qualche parte.

Posso dirti che errori da console non ce ne sono

A proposito dove potrei hostare una singola pagina?

EDIT: ok l'ho hostato su un vecchio dominio che avevo, ecco il link http://hwtraders.altervista.org/ (E' direttamente come file index.php)

Si vede solo il ticker, se guardi dopo aver fatto news 4, scende di qualche decina di pixel, non so perchè xD

[Deathlok92]

Ne approfitto anche per chiedere: si possono organizzare meglio quelle due righe di codice JS, vedo che molti usano strutture del tipo

$(function() {

  var ticker = $("#ticker");

ecc...

});

Cosa cambia fra le due implementazioni?

Inoltre voglio implementare anche che le "news" si fermino "onmouseover" ... ma provo a farlo da solo, al massimo chiedo dopo, prima o poi dovrò litigarci con Jquery xD