2016-09-19 4 views
0

Мне интересно, почему мой слайдер jQuery не останавливается сразу после события: mouseover. Есть задержка, может кто-нибудь помочь мне с этой проблемой? Вот вам мой код: https://jsfiddle.net/jrswchkp/1/jQuery слайдер не останавливается сразу

$(function() { 

    var $clientcarousel = $('#clients-list'); 
    var clients = $clientcarousel.children().length; 
    var clientwidth = (clients * 400); // 140px width for each client item 
    $clientcarousel.css('width', clientwidth); 

    var rotating = true; 
    var clientspeed = 0; 
    var seeclients = setInterval(rotateClients, clientspeed); 


    function rotateClients() { 
    if (rotating != false) { 
     var $first = $('#clients-list li:first'); 
     $first.animate({'margin-left': '-220px'}, 5000, "linear", function() { 
     $first.remove().css({'margin-left': '0px'}); 
     $('#clients-list li:last').after($first); 
     }); 
    } else { 
    $('#clients-list li').stop(); 
    } 
    } 

    $(document).on({ 
    mouseover: function(){ 
     rotating = false; // turn off rotation when hovering 
    }, 
    mouseleave: function(){ 
     rotating = true; 
    } 
    }, '.clients'); 

}); 

ответ

1

Вы должны убедиться, что вы очистить очередь при запуске .stop()

else { 
    $('#clients-list li').stop(true, false); 
} 

Вы можете узнать больше о .stop() here

Вот JSFiddle

+0

У меня есть еще один вопрос - как насчет немедленного начала? Есть ли функция, которая позволяет вернуться к скольжению? –

+0

Вам нужно будет создать свою собственную функцию. В JQuery ничего нет, давайте остановимся и возобновим анимацию. Но есть такие плагины, как [этот] (http://tobia.github.io/Pause/). –

+0

Спасибо! Не могли бы вы дать мне советы, как применить это к моему коду? Похоже, я jcery jquery dummy –

Смежные вопросы