Question

我在做什么：

我正在使用一个名为Transit的jQuery插件在响应式幻灯片中处理一些3D动画。

问题：

在动画完成之前，一切都很有效，直到你快速点击“下一个”或“上一个”。我已经看到了一些类似的问题，但是这些答案对我来说似乎并不适合，因为这些技术上的CSS动画。 如何在动画完成前禁用导航功能？

我还应该注意到我现在正在使用按键，但我也会在最终版本中点击按钮。因此，即使有几种不同的方式来参与幻灯片放映，该方法也应该有效。

工作示例> jsFiddle

剥离代码：

$(document).ready(function () {

// Define the function to play forward
function playForward() {
    // Do Stuff
}

// Define the function to play reverse
function playReverse() {
    // Do Stuff
}

// Animate on keypress
$(document).keydown(function (e) {
    var keyCode = e.keyCode || e.which,
        arrow = {
            left: 37,
            up: 38,
            right: 39,
            down: 40
        }, $status = $('#status');

    switch (keyCode) {
        case arrow.left:
            playReverse();
            break;
        case arrow.up:
            //
            break;
        case arrow.right:
            playForward();
            break;
        case arrow.down:
            //
            break;
    }
});
});

Answer 1

设置变量以跟踪动画过程。当您在按键上触发动画时，将变量设置为true;

var isTransitioning = true;

在播放功能的顶部添加此行以检测它是否在转换中，如果它不执行该功能。

if ( isTransitioning ) { return false; }

检测转换结束How do I detect a transition end without a JavaScript library?并将变量设置为false。

防止新的CSS3＆amp; jQuery动画直到上一个完成

1 个答案: