Как возобновить анимацию после clearTimeout

0

Я не могу об этом подумать, пробовал много разных способов, но не повезло.. В основном, я пытаюсь приостановить анимацию на 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/

  • 0
    Невозможно запустить вашу скрипку из-за ошибок: 1. шпион не определен, 2. простой шпион не определен
  • 0
    Вы могли бы открыть из Firefox или Chrome?
Показать ещё 1 комментарий
Теги:

1 ответ

3
Лучший ответ

Я изменил тайм-аут, который вы устанавливали снова и снова, на интервал, который вам нужно установить только один раз. Затем я добавил свойство "приостановлено", которое установлено на true при наведении курсора мыши и обратно на значение false для мыши.

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

Затем мы просто проверяем свойство перед анимацией вращения:

if (paused) { 
    return; 
}

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

  • 0
    Потрясающие! Теперь работает нормально. Спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню