young_padawan young_padawan - 1 year ago 76
jQuery Question

jQuery slider does not stop at once

I am wondering why my jQuery slider does not stop immediately after event: mouseover. There is a delay, could somebody help me with this issue?
Here you have my code:

$(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();

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


Answer Source

You need to make sure you clear the queue when you run .stop()

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

You can learn more about .stop() here

Here's the JSFiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download