Question

使用名为Velocity JS的库进行动画制作：http://julian.com/research/velocity/

我使用它如下：

 var velocity = new Velocity(element, {
                    translateX: 250,
                    complete: function() {
                       return true;
                    }
                }, 5);

我想要做的是在成功完成动画后检查完成是否已返回，以便我可以切换动画。

检查是否为真的最佳方法是什么

if(velocity.complete() === true)

返回undefined。

感谢任何帮助。

Answer 1

您已经传递了完整的功能，但return true var velocity = new Velocity(element, { translateX: 250, complete: function() { // start another animation } }, 5);在这种情况下并没有那么有用。调用完整函数时启动第二个动画：

data

如果您需要在点击或其他事件上切换动画，您必须将动画布尔值存储在某处，即使在dom元素中或使用jQuery var $velocity = $("#velocity"); $velocity.data("animating", false); $velocity.data("direction", "left"); $velocity.on("click", function () { if ($velocity.data("animating")) { return; } $velocity.data("animating", true); if ($velocity.data("direction") === "left") { var ml = -30; $velocity.data("direction", "right"); } else { var ml = 30; $velocity.data("direction", "left"); } $velocity.velocity({marginLeft:ml},{ duration:500, complete: function () { $velocity.data("animating", false); } }); });方法：

{{1}}

JSFIDDLE

Answer 2

如果您需要存储动画已完成的事实，以便稍后根据用户交互（例如，单击按钮）读取该信息，只需在外部范围中设置变量：

var animationComplete = false;

var velocity = new Velocity(element, {
                    translateX: 250,
                    complete: function() {
                       animationComplete = true;
                    }
                }, 5);

在用户互动发生时阅读：

$("#someButton").on("click", function() {
    if(animationComplete) {
        // do something only if the animation has completed
    }
});

存储该值的位置（作为局部或全局变量，作为对象上的属性等）并不重要，只要它对需要读取和设置它的函数可见。

请注意，永远不会使用complete回调的返回值。 complete回调函数对象被传递到Velocity构造函数中，稍后会从velocity.js自己的代码内部调用它。 Velocity.js可能不会在任何地方公开（甚至存储）此返回值。

Javascript对象属性检查是否返回true

2 个答案: