Question

我放弃了。如何定义Velocity？这些例子都没有表明这一点，而且是正确的;它应该很容易。我试图在没有JQuery的情况下使用速度版本1.2.3（根据GitHub在九天前发布）。我通过从GitHub直接下载到我的网页获得了第一个版本（较早版本，1.2.2），然后将我的网页保存为velocity.js。第二个是通过转到https://github.com/julianshapiro/velocity，访问velocity.js并将其保存为Velocity123.js获得的。

这个测试程序是为了帮助我开始使用velocity，但由于FireFox v 40.0.3的webdeveloper / webconsole报告，由于Velocity未定义的情况，我还不能到达那里。 Velocity undefined的另一个FAQ实例似乎不适用，因为他使用的是JQuery的过时版本。在velocity1.2.3中，我已经看到了Velocity的实际定义，我已经找到了该文件。我已经通过复制它来测试文件定义，并在更改/到\之后将它DIR在shell中，那么如何才能定义？测试代码是：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Test1 Velocity</title>
        <meta charset="utf-8"/>
        <!-- Standard download from GitHub
           <script src="C:/Users/dbd/Documents/Library4thFloor/velocity.js"> 
           </script> 
        -->
        <!-- Suggested by wikipedia 
           <script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js">
           </script> 
         -->
        <!-- manually included from github latest -->
        <script src="C:/Users/dbd/Documents/Library4thFloor/Velocity123.js"> 
        </script>
        <script type="text/JavaScript">
           function press(){
             alert("entered press");
             var idrect = document.getElementById("sq");
             alert("after idrect is set");
             Velocity(idrect, {opacity:0.3},{duration:2,easing:"ease-in-out",loop:5});
             return false;
           } 
        </script>
    </head>
    <body>
        <h1>Sample SVG with Velocity</h1>
        <br>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400">
        <rect id="sq" 
              x="25" 
              y="25" 
              width="200" 
              height="200" 
              fill="lime" 
              stroke-width="4" 
              stroke="pink"
              onclick="press()"
        />
      </svg>
    </body>
    </html>

Answer 1

快速阅读velocity.js文档会显示您的错误。 Velocity与其他jQuery方法一样使用。

例如，如果你想制作一个div红色然后蓝色，每个动画1000毫秒：

$('div')
    .velocity({ backgroundColor: 'red' }, 1000)
    .velocity({ backgroundColor: 'blue' }, 1000)

Answer 2

我使用firefox，此代码适用于Velocity 2.1.3：

Velocity(document.getElementById('elementId'), {property: 'value'}, time);

Answer 3

我在Firefox中测试了您的代码，虽然来自CDN的velocity.js，但它确实有效。尽管有未定义的错误，您甚至可能看不到动画，因为您已将duration设置为2毫秒。尝试将其设置为2000毫秒。

请注意，在HTML 5中，您不再需要提供脚本属性text/javascript。此外，它不是用大写字母J.试着删除属性，看看会发生什么。

Answer 4

尝试： jQuery.Velocity(idrect, {opacity:0.3},{duration:2,easing:"ease-in-out",loop:5});

代替： Velocity(idrect, {opacity:0.3},{duration:2,easing:"ease-in-out",loop:5});

我试图模仿此页面上的交错效果（https://vuejs.org/v2/guide/transitions.html#Staggering-List-Transitions）并且仍然遇到同样的Velocity is undefined错误。 Velocity的依赖关系（http://velocityjs.org/#dependencies）表示没有jQuery，$.Velocity now becomes Velocity。因此，随着jQuery的出现，我改变了它，并且它有效。

Fwiw：对于我的应用程序，我在某些部分使用了Vue，但是jQuery存在于页面上的其他事件监听器和动画，这就是我遇到这个问题的原因。

速度未定义

4 个答案: