The jQuery slider comes to a gradual halt

I can't figure out why my jQuery slider doesn't stop right away after a mouseover event. There seems to be a delay that I can't resolve on my own. Can someone lend a hand with this problem? Here is the code I'm working with: 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');

});

Answer №1

It is important to remember to clear the queue before using .stop()

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

To learn more about .stop(), check out this resource

Feel free to view the JSFiddle code example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to hide the menu bar on a particular window using electron?

In my application, there is a menu that opens the document properties window when clicked. However, I am facing an issue where the application menu gets inherited by the document properties window itself, allowing you to open another document properties wi ...

The slides on SlickJS are initially loaded in a vertical alignment, but once the arrows are interacted with,

I've put together a demonstration that highlights the issue I'm facing. Upon visiting the contact section, you'll notice that all the slickJS slides are stacked vertically initially, but once you interact with them by clicking on the arrow o ...

Use a text link to upload a file instead of using an input field

While I've seen some discussions on this topic already, the conflicting answers have left me uncertain. Is there a foolproof method for triggering file upload without using an input field? Essentially, I'd like to create a div with an icon and te ...

The font implemented in Bootstrap does not appear to be adapting well to different

As I embark on the Bootstrap journey, I find that everything looks great on my desktop browser in terms of responsiveness. However, when I switch to my iPhone 6, it doesn't seem to display as expected... Provided below are a few screenshots: Desktop ...

How to Show an Image in a Search Bar Using HTML

As I put the finishing touches on this table, I decided to add a search function to it. However, I encountered an issue with the search bar design. I wanted to incorporate a search icon png file as the background image, similar to the example showcased on ...

After a two-second period of inactivity, the buttons on the item should trigger an action

I have a scenario in mind that I want to implement: When the user clicks on either the "Plus" or "Minus" button. If the user doesn't click on any of those buttons within 2 seconds, then we assume that the current quantity should be sent to the server ...

Product pages created with PHP, such as displaying as: Page: [1] 2 3 4

I am working on a product page created with WordPress that fetches products and displays them. However, I want to restrict the number of products visible at once. Code for generating with WordPress/PHP: $pages = get_pages(array('parent' => $ ...

What is the best way to use HTML and CSS to center images and headings on a webpage?

This task is really testing my patience... I'm attempting to create a layout that resembles the following: Logo img|h1|img The horizontal lines flanking the subtitle serve as a visual guide, like this --- Subtitle --- Below is the snippet of H ...

Items in a pair of distinct columns

I want to enhance a picture by adding three paragraphs on the left-hand side. Below is my HTML code: <md-toolbar layout-align="center center"> <h3>Traffic Light Component</h3> </md-toolbar> <md-grid-list md-cols ...

"Exploring the world of jQuery and the array data structure

I'm attempting to target and access all inputs with the specified class: validate['number'] However, in some cases, the classes may appear as follows: validate['required', 'number'] My goal is to identify all elements ...

Assign separate classes to even and odd div elements

My PHP code block has this structure: $flag = false; if (empty($links)) { echo '<h1>You have no uploaded images</h1><br />'; } foreach ($links as $link) { $extension = substr($link, -3); $image_name = ($extensi ...

When multiple checkboxes are selected, corresponding form fields should dynamically appear based on the checkboxes selected. I attempted to achieve this functionality using the select option method

Require checkboxes instead of a selection option and have multiple checkbox options. Depending on the checked checkboxes, different form fields should appear. A submit button is needed. I have included some CSS code, but a more detailed CSS code is requir ...

The utilization of the jquery.form.js plugin is resulting in my form being submitted twice

In order to enable Ajax file uploads in my ASP.Net MVC project, I am utilizing the jquery plugin known as "jquery.form.js" (http://malsup.com/jquery/form/#getting-started). However, I am encountering an issue where the controller action responsible for han ...

Updating the table row by extracting data and populating it into a form

As part of my project, I am implementing a feature where I can input 'Actors' into a table using a Form. This functionality allows me to select a row in the table and retrieve the data of the chosen Actor back into the form for updating or deleti ...

Select an image based on the input value provided

I'm new to coding and I'm attempting to replicate the search functionality of icomoon where typing a word displays related images. However, I'm facing an issue where I can't seem to get the value entered in the input field to trigger an ...

Sluggish Bootstrap Carousel Requires Mouseover or Click to Start Sliding

Having Trouble with Bootstrap Carousel Sliding: I've been trying to solve this issue for a while now, but nothing seems to be working. I know this might be a common question, but I really need to fix this problem quickly and none of the suggested solu ...

Is there a way to change TTF files into OTF format?

I am looking to utilize the @font-face feature and have my fonts stored in TrueType (TTF) format. Can anyone advise on how to convert TTF to OpenType (OTF) format? ...

Unexpected behavior with CSS background-image transitions effects

Currently, I am experimenting with a hover swipe effect using div and background image. The background image utilizes the outer div's max-width and an inner div with a padding-bottom percentage to maintain the aspect ratio. However, there are several ...

Exploring methods to reload a parent window from a child window using PHP

After opening a popup window from a modal, I am now trying to refresh the page where my modal is located. I have attempted to write some code that I found here, but it doesn't seem to be working. Here is an example of what I have tried: // This fun ...

Tornadofx highlight selected row with CSS

I am attempting to modify the background color of a selected row and apply the same change to a listview. When I use cell{backgroundColor += Color.BLACK}, it successfully changes the color, but it does not retain the selection color as intended.I have al ...