Question

我有一个显示在页面顶部的通知栏，然后在xx秒后执行slideOut。我还有一个可以点击的图标来加快slideOut。

问题是如果按下按钮，动画会发生两次。点击后消失，然后在xx秒后，它会再次显示并再次滑动。

我想我需要以不同方式编写这些事件来绑定事件？或者我需要添加if语句吗？

<script type="text/javascript">
Ext.onReady(function() {
  hideNotification.defer(7000);
});
var hideNotification = function () {
  Ext.get('notification-bar').slideOut('t', {duration:0.5, easing:'easeOut'});
  Ext.get('notification-hide-button').setDisplayed(false);
}
$("#notification-hide-button").click(function() {
  hideNotification();
});
</script>

Answer 1

你可以使用window.setTimeout函数......就像那样

var hideTimeout = window.setTimeout(hideNotification, 700);

然后添加到hideNotification函数中

window.clearTimeout(hideTimeout);

一旦你点击按钮就应该删除你的方法的延期调用..

在特定持续时间后点击vs.触发时防止重复的jquery动画

1 个答案: