javascript - 如何在clearTimeout后恢复动画

Question

我无法解决这个问题，尝试了很多不同的方法，但没有运气。基本上，我试图在 mouseOver 上暂停动画并在 mouseOut 上恢复动画。我可以通过简单地使用clearTimeout()来使其暂停，但我不知道如何恢复它。请告诉我正确的解决方案和语法。

提前谢谢您!

(function ($) {    
    $.fn.simpleSpy = function (interval, limit) {      
        limit = limit || 3;
        interval = interval || 3000;
        items = [];     

        return this.each(function () {
            $list = $(this),
            currentItem = 0,
            total = 0; // initialise later on

            var i = 0;
            smplet = $list.clone();
            smplet.css("display","none");

            $("body").append(smplet);
            total = smplet.find('> li').length;

            $list.find('> li').filter(':gt(' + (0) + ')').remove();
            $list.css("display","");
            height = $list.find('> li:first').height(); 
            $list.wrap('<div class="spyWrapper" />').parent().css({ height : 55, position:"relative", overflow:"hidden" });  

            $('.close').click(function(){           
                clearTimeout(timec);

                if(currentItem == 0 && smplet.length != 1)
                    delitem=total;
                else
                    delitem=currentItem - 1;

                smplet.find('> li').eq(delitem).remove();

                currentItem--;

                var temp=smplet.find('> li').eq(currentItem).clone();               
                var $insert = temp.css({
                    "margin-top":-height-height/3,
                    opacity : 0
                }).prependTo($list);

                // fade the LAST item out
                $list.find('> li:last').animate({ opacity : .5 ,"margin-top":height/3}, 500, function () {
                        $(this).remove();
                });

                $insert.animate({"margin-top":0,opacity : 1 }, 500).animate({opacity : 1},1000);

                currentItem++;

                total=smplet.find('> li').length;
                if (currentItem >= total) {
                    currentItem = 0;
                }         

                if (total == 1){
                    simpleSpy.stop();
                }   
                else if(total == 0){
                    $("#topbar").hide();
                }                   

                timec=setTimeout(spy, interval);
            });

            currentItem++; 

            function spy() {            
                var temp=smplet.find('> li').eq(currentItem).clone();

                var $insert = temp.css({
                    "margin-top":-height-height/3,
                    opacity : 0,
                    display : 'none'
                }).prependTo($list);

                $list.find('> li:last').animate({ opacity : .5 ,"margin-top":height/3}, 500, function () {
                        $(this).remove();
                });
                $insert.animate({"margin-top":0,opacity : 1 }, 500).animate({opacity : 1},1000);
                    $insert.css("display","");

                currentItem++;          

                if (currentItem >= total) {
                    currentItem = 0;
                }

                timec=setTimeout(spy, interval);

             }
                timec=setTimeout(spy, interval);        
        });     

    }; 

    $('ul.alerts')
    .mouseover(function(){
        clearTimeout(timec);
    })
    .mouseout(function(){
        timec=setTimeout(spy, interval);
    });  

})(jQuery);

通话

 $(document).ready(function() {
        $('ul.alerts').simpleSpy();

 }); 

jsfiddle 与 html 和 css

http://jsfiddle.net/1781367/3eK4K/3/

Answer 1

我将您反复设置的超时更改为您只需设置一次的时间间隔。然后我添加了一个“暂停”属性，该属性在鼠标悬停时设置为 true，在鼠标移出时设置为 false。

var paused = false;
$list.mouseover(function() { paused = true; });
$list.mouseout(function() { paused = false; });

然后我们只需在旋转动画发生之前检查该属性:

if (paused) { 
    return; 
}

http://jsfiddle.net/3eK4K/6/