jQuery stop() not working? #139

n8felton opened this Issue Apr 3, 2013 · 4 comments


None yet
3 participants

n8felton commented Apr 3, 2013

It appears that a recent commit may have broke the stop() function?

Basic test: http://jsfiddle.net/n8felton/MJZJa/


fgnass commented Apr 3, 2013

Hm, there has never been such a method in the official spin.js plugin, only in the Spinner object. To stop a spinner via jQuery you have to call $('#el').spin(false).

@fgnass fgnass closed this Apr 3, 2013

n8felton commented Apr 3, 2013

On your primary site, it states:

Hiding the spinner

To hide the spinner, invoke the stop() method, which removes the UI elements from the DOM and stops the animation. Stopped spinners may be reused by calling spin() again.

This may just be a regular function, not necessarily a jQuery function. Regardless, it was working with test code yesterday, and now the stop() function appears to not work anymore. I will use the method you described however, as that appears to work.


fgnass commented Apr 3, 2013

Strange, maybe you were using a 3rd party plugin? The official one only exists since yesterday and hasn't changed since the first commit: https://github.com/fgnass/spin.js/commits/gh-pages/jquery.spin.js

BTW, you can invoke the underlying stop() method like this:


drfunk2458 commented Nov 14, 2016

I can't seem to stop your spinner either... Here is my code...

<title>Spin Test</title> <script type="text/javascript" src="/APM2/js/jquery-1.12.4.js"></script> <script type="text/javascript" src="/APM2/js/spin.js"></script> <script type="text/javascript" src="/APM2/js/jquery.spin.js"></script> <script type="text/javascript"">
      $(document).ready(function () {
            var opts = {
              lines: 12 // The number of lines to draw
            , length: 14 // The length of each line
            , width: 6 // The line thickness
            , radius: 16 // The radius of the inner circle
            , scale: 1 // Scales overall size of the spinner
            , corners: 1 // Corner roundness (0..1)
            , color: '#000' // #rgb or #rrggbb or array of colors
            , opacity: 0.25 // Opacity of the lines
            , rotate: 0 // The rotation offset
            , direction: 1 // 1: clockwise, -1: counterclockwise
            , speed: 1 // Rounds per second
            , trail: 60 // Afterglow percentage
            , fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
            , zIndex: 2e9 // The z-index (defaults to 2000000000)
            , className: 'spinner' // The CSS class to assign to the spinner
            , top: '50%' // Top position relative to parent
            , left: '50%' // Left position relative to parent
            , shadow: false // Whether to render a shadow
            , hwaccel: false // Whether to use hardware acceleration
            , position: 'absolute' // Element positioning
            var target = document.getElementById('spinner')
            var spinner = new Spinner(opts).spin(target);

  <div id="spinner"></div>
 //do something important here..............
  <script type="text/javascript"> $('#spinner').spin('hide'); </script>

other options I tried:

<script type="text/javascript"> $('#spinner').spin('stop'); </script> <script type="text/javascript"> $('#spinner').spin.stop(); </script> <script type="text/javascript"> $('#spinner').stop(); </script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment