动画 HTML5 横幅在除 Safari 之外的所有应用中都有效

Question

我在 Animate CC 中创建了一个横幅，您可以在此处看到： http://www.dctuk.it/test/trustpilotbanner.html

它在所有浏览器中都运行良好。

但是当我把它放在我们的测试站点（一个 asp.NET 站点）上时，它在任何地方都可以工作，除了 Mac 上的 Safari。它在 Firefox 上运行良好，在 Mac 上运行 Chrome，但在 Safari（或 iPad）上运行良好，我不知道为什么。

您可以在底部附近的网站上看到它：[link 已删除]

有人知道这是为什么吗？我认为这可能与 Animate 无关，只是 javascript 冲突但不确定？

干杯

乔恩

Answer 1

在站点中，您的 init() 函数在靠近底部的某处被覆盖：

<script type="text/javascript">
    if ( $(window).width() < 480) {     
        $( init );
        function init() {

            // Move the paragraph from #myDiv1 to #myDiv2
            $('#coloursnew').append( $('#imageholder') );
        }
    }
    else {
        //Add your javascript for small screens here
    }
</script>

在 webkit 中，即使它在 if 语句中并替换您的横幅初始化函数，也会计算此函数：

function init() {
    // --- write your JS code here ---

    canvas = document.getElementById("canvas");
    images = images||{};

    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(lib.properties.manifest);
}

该问题的一个解决方案是像这样替换较小设备的代码：

if ( $(window).width() < 480) {     
    init = function() {
        // Move the paragraph from #myDiv1 to #myDiv2
        $('#coloursnew').append( $('#imageholder') );
    };
}

这是问题的示例 JSFiddle。在不同的浏览器中尝试查看结果。

动画 HTML5 横幅在除 Safari 之外的所有应用中都有效

Animate HTML5 banner working in everything but Safari

javascript

safari

adobe

jquery-animate