jquery关键帧完整没有触发

我使用的是this plugin，它的大部分工作原理。我创建了这段代码：jquery关键帧完整没有触发

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); 
     } 
    });   
};

我的问题是与完整回调函数。它只是不开火。我以前用这个和它的工作，但我看不到我在做什么错？

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

更新1

它已经指出该动画在Firefox中不起作用。请使用chrome查看我的小提琴。

来源

2014-09-23 r3plica

小提琴不适合我使用Firefox。 – Stryner 2014-09-23 13:43:32

我用http://jsfiddle.net/s3tcg9fe/3/更新了小提琴，但我无法让它在Firefox中工作。这是另一个问题，我登录的是更重要的:) – r3plica 2014-09-23 14:16:50

尊重，如果你已经向项目的维护者报告这个问题，他可以解决这个错误，而不仅仅是你。 – 2014-12-10 23:49:39

我想到了这一点，这是与该插件。所以我重新写了它，并删除了一些我不需要的东西。

对于那些发现类似的问题，这里是代码：

(function() { 
    // Data 
    var domPrefixes = ["-webkit-", "-moz-", "-o-", ""]; 

    // Private methods 
    var createKeyframeStyleTag = function (params) { 
    return $("<style>").attr({ 
     class: "keyframe-style", 
     id: params.id, 
     type: "text/css" 
    }).appendTo("head"); 
    }; 

    var defineKeyFrames = function (name, data, prefix) { 
    var css = "@" + prefix + "keyframes " + name + " {"; 

    for (var key in data) { 
     if (key !== "name") { 
     css += key + " {"; 

     for (var property in data[key]) { 
      css += prefix + property + ":" + data[key][property] + ";"; 
     } 

     css += "}"; 
     } 
    } 

    css += "}"; 

    return css; 
    }; 

    $.keyframe = { 
    define: function (data) { 
     var css = "", 
     frameName = data.name || ""; 

     for (var i = 0; i < domPrefixes.length; i++) { 
     css += defineKeyFrames(frameName, data, domPrefixes[i]); 
     } 

     createKeyframeStyleTag({ 
     id: frameName 
     }).append(css); 
    } 
    }; 

    $.fn.playKeyframe = function (frameOptions) { 
    var self = this, 
     animationcss, 
     delay, 
     duration, 
     repeat, 
     callback; 

    frameOptions = $.extend({ 
     duration: 0, 
     timingFunction: "ease", 
     delay: 0, 
     repeat: 1, 
     direction: "normal", 
     fillMode: "forwards" 
    }, frameOptions); 

    delay = frameOptions.delay; 
    duration = frameOptions.duration; 
    repeat = frameOptions.repeat; 

    callback = frameOptions.complete; 
    animationcss = frameOptions.name + " " + duration + "ms " + frameOptions.timingFunction + " " + delay + "ms " + repeat + " " + frameOptions.direction + " " + frameOptions.fillMode; 

    self.each(function() { 
     var element = $(this); 

     for (var i = 0; i < domPrefixes.length; i++) { 
     $(element).css(domPrefixes[i] + "animation", animationcss); 
     } 

     if (callback) { 
     element.on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oAnimationEnd animationend", callback); 
     element.on("webkitAnimationIteration mozAnimationIteration MSAnimationIteration oAnimationIteration animationiteration", callback); 
     } 
    }); 

    return self; 
    }; 
}).call(this);

来源

2014-09-24 08:45:29 r3plica

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

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

来源

2014-11-07 15:14:27 Johan

jquery关键帧完整没有触发

回答

相关问题