페이딩 최신 뉴스 티커

Question

나는 최신 뉴스 티커를 생산하는 가장 효율적인 방법을 찾고 있습니다.

나는 li 's의 임의의 수를 보유 할 수있는 ul이 모든 나는이 필요하다고 한 번에, 그것을 페이드 아웃 후 하나 li 5 초 동안 잡고, 한 페이딩을 통해 루프합니다. 목록은 li 높이 40px로 표시되며 표시되는 우물도 40px이며 원하는 효과를내는 overflow: hidden이 표시됩니다. 또한 표시되는 동안 커서가 위로 올라 가면 li을 제자리에 잡을 수 있도록하려면 빌드하는 것이 좋습니다.

널리 사용되는 ala (이전 BBC 스타일) jQuery 시세 플러그인이 있지만 사용하려고 시도 했으므로 필요로하는 단순성 때문에 부피가 커 보이고 사용하는 스타일이 혼란 스럽습니다. .

것은 내가이 지금까지 사용하고있다 :

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

    } 

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

을하지만 실제로 다음 li 때문에 효과가 퇴색하지 않는 것은 지저분한이다.

누군가 내가 원하는 효과를내는 데 도움이 될 수있는 몇 가지 대안을 제안하면 도움이 될 것입니다.

감사

Answer 1

hide() 및 전화 fadein()는 이후의 요소는 목록의 맨 위에됩니다.

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

참조 :

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

Answer 2

내가 그런 식으로 그것을 할 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를 참조 opacity 마우스 내부 UL 왔을 때 1 (LI 내의 일부 특수 요소 만 unde 일 때 변경 될 수 있습니다. r 마우스) 한 번 왼쪽으로 한 번 더 시작합니다. UL. 데모 : http://jsfiddle.net/KFyzq/6/