使得onclick函數無法工作，直到css動畫完成

我有這些「上一個」和「下一個」按鈕，移動我的網站上的一些幻燈片。單擊一個時，它將轉到下一張或上一張幻燈片，並使用css3過渡屬性進行動畫製作，並更改滑動容器的左側屬性+ =或 - = 800px。使得onclick函數無法工作，直到css動畫完成

#sliding-container { 
position: relative; 
left: -1600px; 

transition: all 2s ease; 
-moz-transition: all 2s ease; 
-webkit-transition: all 2s ease; 
-o-transition: all 2s ease; 
} 

.slide { 
width: 800px; height: 500px; 
background-color: white; 

transition: all 2s ease; 
-moz-transition: all 2s ease; 
-webkit-transition: all 2s ease; 
-o-transition: all 2s ease; 
}

這是JS：_

function slide(direction) { 
      if (direction == 'prev') { 
        $("#sliding-container").css('left', '+=800px'); 

      } 

      else if (direction == 'next') { 
        $("#sliding-container").css('left', '-=800px'); 

      } 
     }

這張幻燈片功能獲得的onclick稱爲：_

 <div class="fade" id="fade1" onclick="slide('prev')"><</div> 
     <div class="fade" id="fade2" onclick="slide('next')">></div>

的問題

但問題是，如果你點擊下一個或上一個按鈕快兩倍，它會混亂，這就是爲什麼，我希望該功能不會再次點擊直到2秒鐘通過（即，直到過渡完成）。我怎樣才能做到這一點？

來源

2013-04-10 Jahanzeb Khan

當點擊按鈕時，您可以設置一個變量，例如running爲true。然後，您需要綁定到動畫結尾是這樣的：

OBJECT.bind（ 'animationend webkitAnimationEnd'，函數（E）{ 運行= FALSE; }）;

這樣你就不必拖延或超時，可以等待它告訴你完成了。

然後在您點擊之後，您可以在決定運行動畫之前檢查它是否正在運行。

來源

2013-04-10 16:06:12 Fernker

謝謝，我會試試看，但我需要更多的細節，你能否告訴我該怎麼做，我真的不明白如何根據情況寫出你給出的那一行js。 – 2013-04-10 16:12:59

當然，所以看你的代碼，你可能會想這樣： $（'＃slide-container'）。bind（'transitionend webkitTransitionEnd mozTransitionEnd'，function（e）{running = false;}）; 這將綁定到滑動容器的任何轉換結束，這是你正在過渡，並且它完成後它將做你想要它在該功能。 – Fernker 2013-04-10 16:23:58

我很抱歉，但沒有工作，另一方面，我確實解決了這個問題，我把它作爲答案發布。謝謝反正，你確實給了我一個關於如何使用計時器的想法。 – 2013-04-10 17:01:53

我使用了一個超時函數，在Fernker的幫助下，我想到了如何使用超時。

我前頭部段加入此，

<script type="text/javascript"> 
    var running = false; 
    </script>

我已將此添加到滑動函數的頂部，

running = true;

和這條線在滑動功能

的底部

window.setTimeout(function() {running = false;}, 2000);

2000因爲這就是過渡的時間。

我編輯的onclick部分

 <div class="fade" id="fade1" onclick="if (!running) { slide('prev'); }"><</div> 
     <div class="fade" id="fade2" onclick="if (!running) { slide('next'); }">></div>

而現在它的作品！所以基本上這是fernker的建議，只是暫停，因爲綁定不起作用。

來源

2013-04-10 17:07:47

我認爲我的解決方案應該可以工作，如果你可能不停地修補它。如果您改變轉換時間或超時時間，當您的方式工作時，它現在會中斷。這可能不是這樣一個小腳本的問題，但如果可以避免的話，總體上是不好的做法。 – Fernker 2013-04-10 19:34:27

耶謝謝，我會研究它。 – 2013-04-11 09:19:07

使得onclick函數無法工作，直到css動畫完成

回答

相關問題