通过鼠标事件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);
});