mouseover/hover에서 애니메이션 일시 중지

Question

UL 목록을 스크롤하는 jQuery 스크립트를 만들었습니다. 문제는 목록의 현재 항목을 마우스로 가리키면 애니메이션을 일시 중지하고 싶습니다.

매시간 내 시계 기능을 호출하는 타이머와 새 항목으로 목록을 업데이트하는 업데이트 기능이 있습니다. 애니메이션과 관련이 없으므로 포함하지 않았습니다.

// Initiate a call to ticker every 1second 
    var tickerUpdateTimer = setInterval('ticker()', 1000); 

시세 기능

function ticker() { 
    if ($('ul#ticker li:first').length == 0) 
     tickerUpdate(); 

     $.when(tickerSlideIn()).then(tickerSlideOut()); 
} 

function tickerSlideIn() { 
    $('ul#ticker li:first').show("slide", { direction: "down" }, tickerSpeed).delay(tickerPause); 
} 

function tickerSlideOut() { 
    $('ul#ticker li:first').hide("slide", { direction: "up" }, tickerSpeed, function() {$(this).remove();}); 
} 

나는 누군가가 나를 호버/마우스 오버, 덕분에 일시 정지 제 기능을 다시 도움이 될 수 있기를 바랍니다 JQuery와 UI 슬라이드 기능을 사용합니다.

Answer 1

당신은 어떤 플러그인없이 수행 할 수 있습니다

var tickerUpdateTimer = setInterval('ticker()', 1000), paused = false; 

$('ul#ticker').hover(function(){ paused = true; }, 
         function(){ paused = false; }); 

function ticker() { 

    if (paused) return; 

    if ($('ul#ticker li:first').length == 0) 
     tickerUpdate(); 

     $.when(tickerSlideIn()).then(tickerSlideOut()); 
}