Codepen vs. Jsfiddle --- 为什么只有其中一个与 Velocity.js 一起工作？

Question

我遇到了 Velocity 问题。

我为一家公司创建了一个动画徽标，我正在为其进行一些重新设计，当我将其转移到网站登录页面的 HTML 并进行预览时，没有动画运行 .我 A/Bd 做了很多事情，并用一个按钮替换了文档加载调用以使测试更容易，然后我从我使用的 Codepen 中获取了功能代码并将其复制到一个 jsfiddle 中，但它没有起作用。

我检查了所有内容，完全相同的设置和库。我尝试在每个变体和序列中移动 jQuery、速度和我的动画代码在头部和 body 之间。

http://codepen.io/JTBennett/pen/WrRwWP
运作

https://jsfiddle.net/6zjc98g1/1/
未运行

这是我写的代码：

$( ".anbutton1" ).click(function() {

  $(".anpetal").velocity(
    "transition.expandIn", 
              {stagger: 5, drag:true, duration:1000}
  ).delay(4000)

  $(".anwords").velocity(
    "transition.expandIn", 
              {stagger: 65, drag:true, duration:1000}
  ).delay(4000)

});

如果我能让它开始在 jsfiddle 中工作，我会很高兴。

Answer 1

阅读控制台：

Mixed Content: The page at 'https://fiddle.jshell.net/_display/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js'. This request has been blocked; the content must be served over HTTPS.

tl;dr

您的 jsfiddle link 通过 HTTPS 托管，而 Codepen 通过 HTTP 托管（不安全）。

将您的脚本更改为 https://，它将起作用。
https://jsfiddle.net/DerekL/bpcLn6rb/

或者，如果您愿意，只需通过 HTTP 加载 jsFiddle，它也会按预期工作。

还记得将其更改为 onLoad 或 onDomready 以便您的 jQuery 代码能够正确执行。

Codepen vs. Jsfiddle --- 为什么只有其中一个与 Velocity.js 一起工作？

Codepen vs. Jsfiddle --- Why does only one of these work with Velocity.js?

javascript

jquery

velocity