CODEWITHSUNDEEP
jquerycssslider
young_padawan
young_padawan

Reputation: 27

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: https://jsfiddle.net/jrswchkp/1/

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

});

Upvotes: 0

Views: 39

Answers (1)

Benjamen Kuhman
Benjamen Kuhman

Reputation: 350

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

Upvotes: 1

Related Questions