Codepen与Jsfiddle ---为什么只有其中一个与Velocity.js一起使用？

Question

我遇到了Velocity的问题。

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

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

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

阅读控制台：

  

混合内容：“https://fiddle.jshell.net/_display/”页面是通过HTTPS加载的，但是请求了一个不安全的脚本“http://cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js”。此请求已被阻止;内容必须通过HTTPS提供。

<强> TL;博士

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

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

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

还要记住将其更改为onLoad或onDomready，以便正确执行jQuery代码。