JQuery animation stops mid-div on double click

Question

I created a sliding list of divs using the following code :

<div class="row">
    <img class="back-arrow">
    <div class="hide-extra">
    <div class="tile-container">
                <div class="tile"></div>
                <!-- More Divs -->
    </div>
    </div>
    <img class="next-arrow">
</div>

The overflow is supposed to stay hidden and the divs slide to show the next/ previous divs when the corresponding arrows are clicked. Here's a simplified version of my code to move forward a tile:

function nextTile() {
     var tileWidth = /*Width of each div*/;
     var position = parseInt($(".tile").css("right"));
     position += tileWidth;
     var rightPosition = position + "px";
     $(".tile").animate({right:rightPosition}); //in my code each of the divs in the row move position
}

}

The code works fine except that if I press too rapidly on the arrows the divs will not slide the appropriate length. Instead they slide part way and leave me stuck with a div half visible.

It sounds like you want to see if the previous click is still animating. Then you will need to decide if you want to complete the animation immediately or ignore any clicks until the animation has finished. http://stackoverflow.com/questions/6992626/jquery-animation-detect-if-animating — Malk, Feb 22 '17 at 00:37

score 0 · Answer 1 · edited May 23 '17 at 12:00

I made the following addition to my code using Malk's comment and his attached link: jQuery animation detect if animating?

function nextTile() {
     var tileWidth = /*Width of each div*/;
     var position = parseInt($(".tile").css("right"));
     position += tileWidth;
     var rightPosition = position + "px";
     var tileLock = $(".tile").is(':animated'); // new code
     if (tileLock === false)                    // new code
          $(".tile").animate({right:rightPosition}); 
}

JQuery animation stops mid-div on double click

1 Answers1