CODEWITHSUNDEEP
jquerycssanimationjquery-animate
ctrlmaniac
ctrlmaniac

Reputation: 444

How to prevent multiple clicks triggering multiple animations

I was wondering how to prevent multiple clicks or that one event is triggered multiple time because of those multiple clicks.

Let's say I have to animate an object. One button will trigger the animation, the other button will reset the animation.

<div class="div">
   Animate Me!
</div>
<div class="nav">
    <div class="start">start</div>
    <div class="reset">reset</div>
</div>

I don't care how many times the user would click the "star" button, the animation must be triggered just once. That doesn't mean that in the future the animation can't be triggered any longer. When the animation is reset, it can be triggered another time, and so on.

$( '.start' ).click(function(){
    $('.div').animate({
        left: '+=' + 100});
});

$( '.reset' ).click(function(){
    $('.div').animate({
        left: 50});
});

Here is an example of what I am willing to do: fiddle

Try to click as much as you can on the "start" button and the animation will be triggered according to the numbers of clicks.

I looked up on the web and I found out that there are two ways that prevent multiple clicks. However it seems that they don't work with me.

1) use .unbind() found here:

$( '.reset' ).unbind().click(function(){
    $('.div').animate({
        left: 50});
});

but it doesn't work: fiddle;

2) use event.stopImmediatePropagation found here:

$( '.reset' ).click(function(event){
event.stopImmediatePropagation()
    $('.div').animate({
        left: 50});
});

doesn't work neither. fiddle;

How can I prevent that the "start" button triggers many times the animation? but to be clicked when the "reset" button is clicked?

Upvotes: 0

Views: 1454

Answers (2)

alexP
alexP

Reputation: 3765

You could add a helping class to the start-button and remove it if reset-button is clicked.

$('.start').click(function () {
    if(!$(this).hasClass('move')){
        $(this).addClass('move');
        $('.div').animate({
            left: '+=' + 100
        });
    }
});

$('.reset').click(function () {
    $('.start').removeClass('move');
    $('.div').animate({
        left: 50
    });
});

Fiddle

Better:

$('.nav').on('click', '.start:not(.move)', function () {
    $(this).addClass('move');
    $('.div').animate({
        left: '+=' + 100
    });
});

$('.reset').click(function () {
    $('.start').removeClass('move');
    $('.div').animate({
        left: 50
    });
});

Fiddle

Upvotes: 1

tkay
tkay

Reputation: 1726

Use jquery one method http://api.jquery.com/one/. 

$( '.start' ).click(function(){
var div = $('.div:not(.animated)');
div.animate({
        left: '+=' + 100}).addClass('animated');
});

$( '.reset' ).click(function(event){
var animated = $('.div.animated');
animated.animate({
        left: 50}).removeClass('animated');
});
.div {
    position: absolute;
    top: 150px;
    left: 50px;
    height: 100;
    width: 100;
    background-color: blue;
}

.start, .reset {
    display: table-cell;
    width:50%;
}

.start {
    background-color:green;
}

.reset{
    background-color:red;
}

}
.nav {
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    height: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div">
   Animate Me!
</div>
<div class="nav">
    <div class="start">start</div>
    <div class="reset">reset</div>
</div>

Upvotes: 0

Related Questions