Приостановить анимацию при наведении курсора - PullRequest
Новая
       12

Приостановить анимацию при наведении курсора

0 голосов
/ 27 января 2012

Я создал сценарий jQuery, который будет прокручивать список UL, проблема в том, что я хотел бы приостановить анимацию, если текущий элемент в списке находится.

У меня есть таймер, который вызывает мою функцию тикера каждую секунду, и функцию обновления, которая обновляет список новыми элементами, я не включил этот, поскольку он не имеет никакого отношения к анимации. 

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

Функции тикера используют функцию слайда jQuery UI 

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

Я надеюсь, что кто-то может помочь мне переписать мои функции, чтобы сделать паузу при наведении курсора мыши, спасибо.

1 Ответ

0 голосов
/ 29 января 2012

Вы можете сделать это без какого-либо плагина: 

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