jquery 关键帧完成不触发

Question

我正在使用 this plugin在大多数情况下它都有效。我创建了这段代码:

function spin() {
    var spinner = $(".spinner"),
        container = $(".spinner-container", spinner),
        items = $(".spinner-item", spinner);

    var itemWidth = items.first().outerWidth(true),
        containerWidth = items.length * itemWidth;

    container.css({
        width: containerWidth
    });

    $.keyframe.define({
        name: "slide",
        from: {
            "transform": "translate(0px)"
        },
        to: {
            "transform": "translate(-" + itemWidth + "px)"
        }
    });

    container.playKeyframe({
        name: "slide",
        duration: "5s",
        timingFunction: 'ease-in-out',
        repeat: 2,
        complete: function () {
            alert("complete");

            //var item = container.find(".spinner-item").first();

            //console.log(item);

            //item.parent().append(item);
        }
    });        
};

我遇到的问题是complete 回调函数。它只是没有开火。我以前用过这个并且它有效，但我看不出我做错了什么......

我创建了一个 jsfiddle for you to look at :)

更新 1

有人指出动画在 firefox 中不工作。请使用 chrome 查看我的 fiddle 。

Answer 1

文档不正确。我通过将回调作为第二个参数传递给 playKeyframe 来让它工作。

container.playKeyframe({
    name: "slide",
    duration: "5s",
    timingFunction: 'ease-in-out',
    repeat: 2
}, function () {
    alert("complete");
});