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關鍵幀完整沒有觸發

回答

相關問題