如何防止多次点击触发多个动画

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:

1)使用.unbind()在这里找到:

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

but it doesn't work: fiddle;

但它不起作用:小提琴;

2) use event.stopImmediatePropagation found here:

2)使用event.stopImmediatePropagation在这里找到:

$( '.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?

如何防止“开始”按钮多次触发动画?但单击“重置”按钮时单击?

2 个解决方案

#1

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

#2

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

使用jquery方法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>