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