如何防止多個點擊觸發多個動畫

Question

我想知道如何防止多次點擊或多次點擊觸發多個事件。

比方說，我必須動畫一個對象。 一個按鈕將觸發動畫，另一個按鈕將重置動畫。

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

我不在乎用戶點擊「星號」按鈕的次數，動畫只能觸發一次。這並不意味着將來動畫不能再被觸發。當動畫被重置時，它可以被另一次觸發，等等。

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

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

這裏是我願意做一個例子：fiddle

嘗試點擊儘可能多的，你可以在「開始」按鈕和動畫將根據點擊的數量被觸發。

我擡頭看着網頁，發現有兩種方法可以防止多次點擊。不過看起來他們不和我一起工作。

1）使用.unbind（）found here：

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

，但它不工作：fiddle;

2）使用event.stopImmediatePropagation found here：

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

不工作也沒有。 fiddle;

我該如何防止「開始」按鈕觸發多次動畫？但點擊「重置」按鈕時會被點擊？

Answer 1

你可以伸出援助之類添加到啓動按鈕，將其刪除，如果被點擊重置按鈕。

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

更好：

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

Answer 2

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

Answer 3

使用jQuery的.one()

$('.start').one('click', function() { 
 
    $('.div').animate({ left: '+=' + 100 }); 
 
    $('.reset').click(function() { 
 
     $('.start').off('click'); 
 
     $('.div').animate({ left: 50 }); 
 
     $('.start').one('click', function() { 
 
      $('.div').animate({ left: '+=' + 100 }); 
 
     }); 
 
    }); 
 
});

.div { 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>