jQuery Animation .stop() issue

Question

Hi im creating a custom switch unsing jquery, css and html. At first it was working fine, until when you rapidly click on the switch the animation is not as expected. I used animation stop but it's still not working.

$('.options').click(function () {
		    var holder = $(this).parent('.switch-holder');
		    if (parseInt(holder.css('margin-left')) >= "0") {
		        // naka off
		        holder.stop(false, true).animate({
		            "margin-left": "-=50px"
		        }, "slow");
		    } else {
		        holder.stop(false, true).animate({
		            "margin-left": "+=50px"
		        }, "slow");
		    }
		});

.switch-container {
    padding: 0px;
    margin-top: 4px;
    font-size: 0px;
    display: inline-block;
    width: 100px;
    height: 35px;
    overflow:hidden;
    outline: solid 1px black;
}
.switch-container .switch-holder {
    width: 150px;
    height: inherit;
}
.switch-container .options {
    font-size: 10px;
    display: inline-block;
    height: inherit;
    box-sizing: border-box;
    float: left;
    width: 33.33%;
    background: grey;
    padding:0px;
    margin: 0px;
}
.switch-container .on {
    background: green;
}
.switch-container .off {
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch-container">
    <div class="switch-holder">
        <div class="options off">Off</div>
        <!-- !-->
        <div class="options"> </div>
        <!-- !-->
        <div class="options on">On</div>
    </div>
</div>

Answer 1

Try using the .finish() method instead of .stop(). From the documentation:

When .finish() is called on an element, the currently-running animation and all queued animations (if any) immediately stop and their CSS properties set to their target values. All queued animations are removed.

Code snippet:

$('.options').click(function () {
		    var holder = $(this).parent('.switch-holder').finish();
		    if(!holder.hasClass('open')) {
		        // naka off
		        holder.animate({
		            "margin-left": "-=50px"
		        }, "slow").addClass('open');
		    } else {
		        holder.animate({
		            "margin-left": "+=50px"
		        }, "slow").removeClass('open');
		    }
		});

.switch-container {
    padding: 0px;
    margin-top: 4px;
    font-size: 0px;
    display: inline-block;
    width: 100px;
    height: 35px;
    overflow:hidden;
    outline: solid 1px black;
}
.switch-container .switch-holder {
    width: 150px;
    height: inherit;
}
.switch-container .options {
    font-size: 10px;
    display: inline-block;
    height: inherit;
    box-sizing: border-box;
    float: left;
    width: 33.33%;
    background: grey;
    padding:0px;
    margin: 0px;
}
.switch-container .on {
    background: green;
}
.switch-container .off {
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch-container">
    <div class="switch-holder">
        <div class="options off">Off</div>
        <!-- !-->
        <div class="options"> </div>
        <!-- !-->
        <div class="options on">On</div>
    </div>
</div>