使得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动画完成

回答

相关问题