Fading Neueste Nachrichten Ticker

Question

Ich bin auf der Suche nach der effizienteste Möglichkeit, einen aktuellen Newsticker zu produzieren.

Ich habe eine ul die eine beliebige Anzahl von li ‚s halten kann und alle I müssen eine Schleife durch sie eine in Verblassen, für 5 Sekunden Halten und Verblassen es dann aus, einen li zu einem Zeitpunkt. Die Liste wird mit einer li Höhe von 40px angezeigt und der Brunnen, in dem es angezeigt wird, ist auch 40px, was mit overflow: hidden den gewünschten Effekt erzeugt. Auch in der Lage, die li an Ort und Stelle zu halten, wenn der Cursor darüber schwebt, während es angezeigt wird, wäre es toll, es zu bauen.

Ich weiß, es gibt das jQuery Ticker-Plugin, das weit verbreitet ist (ala die alte BBC-Stil), aber ich habe versucht, es zu verwenden und es scheint so sperrig für die Einfachheit, die ich brauche und es spielt Chaos mit dem Styling ich benutze .

Ich habe dies bisher mit:

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

    } 

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

Aber es verblasst nicht tatsächlich in der nächsten li so die Wirkung ist ein bisschen chaotisch.

Wenn jemand einige Alternativen vorschlagen könnte, um den Effekt zu erzeugen, den ich brauche, wäre das so nützlich.

Dank

Answer 1

hide() und rufen fadein() das Element, nachdem es wird die Spitze der Liste.

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); 

siehe:

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

Answer 2

ich es so tun woudl:

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); 
      }); 
}); 

$('#ticker').hover Sie, welche Intervall löscht und stoppt Animation und kehrt opacity-1, wenn die Maus innerhalb UL bekam (Dies kann geändert werden, wenn nur ein spezielles Element in LI nicht deklariert ist r Maus) und startet es erneut, sobald es das UL verlassen hat. Demo: http://jsfiddle.net/KFyzq/6/