通过鼠标事件jquery暂停/恢复动画

Question

这是一个代码：http://jsfiddle.net/XqS2f/

我知道我需要以某种方式保存块的当前位置或类似的东西......但可能存在另一种更易于使用的解决方案？

$(function () {
var startTime = new Date();    
tl = $('#thumbs_list');
tl.css('overflow', 'hidden');

var slider = $('#thumbs_list_frame'),
    items = slider.find('li');
var sliderHeight = slider.height(),
    itemsNum = items.length,
    itemHeight = items.height();


slider.css('top', '-' + (sliderHeight + itemHeight) + 'px');

var startPos = slider.css('top');

items.first().before(items.clone());
items.last().after(items.clone());

scrollItems(slider,sliderHeight,itemHeight,startPos,4);
var endTime = +new Date();
var diff = endTime - startTime;

setInterval(function(){ 
    scrollItems(slider,sliderHeight,itemHeight,startPos,4);
}, 300);

});

function scrollItems(container, targetsHeight, increment, startPos, temps) { var secs = temps * 3000;

container.mouseover(function(){
  container.stop(true);
}).mouseout(function(){
  //container.animate();
});   

container.animate({
    'top': '-' + ((targetsHeight * 2) + increment) + 'px'
}, secs, 'linear', function () {
    container.css('top', startPos);      
});

}

Answer 1

尝试在准备好的文档中添加此代码和此jsfiddle：

var itvl = setInterval(function(){ 
        scrollItems(slider,sliderHeight,itemHeight,startPos,4);
    }, 4000);

    $('#container').hover(function(){
        clearInterval(itvl);
        $('#slider').stop();
    },function () {
        var itvl = setInterval(function(){ 
            scrollItems(slider,sliderHeight,itemHeight,startPos,4);
        }, 4000);
});