Question

我是网络开发和javascript的新手。我改编了另一个人代码来创建我对svg非常简单的滚动动画效果。但是我花了几个小时试图将这个效果从codepen带到我的wordpress演示站点。我确信我拥有所有资源，但仍然存在错误，动画也不会出现。我尝试在chrome上更改代码和调试，但外部js资源只有几个错误。

提前致谢！

您可以在此处查看代码工作的效果（http://codepen.io/anon/pen/xZvKZj）

此代码当前无效的wordpress网站链接为www.donatedtech.com/scroll

这是我的完整代码，因为我把它放在wordpress上的html块中

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script type="text/javascript">
    jQuery(function($){ 
      $(document).ready(function() {
        //variable for the 'stroke-dashoffset' unit
        var $dashOffset = $(".path1").css("stroke-dashoffset");
        //on a scroll event - execute function
        $(window).scroll(function() {
          //calculate how far down the page the user is 
          var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100);
          //convert dashoffset pixel value to interger
          var $newUnit = parseInt($dashOffset, 10);
          //get the value to be subtracted from the 'stroke-dashoffset'
          var $offsetUnit = $percentageComplete * ($newUnit / 100);
          //set the new value of the dashoffset to create the drawing effect
          $(".path1").css("stroke-dashoffset", $newUnit - $offsetUnit);
        });
      });
    });
    </script>

    <style>
    mydiv{
      font-family: avenir, helvetica, sans-serif;
      background: grey;
      color: green;
    }

    h1 {
      text-align: center;
      padding-bottom: 50px;
      font-size: 2.4em;
      font-weight: 200;
      letter-spacing: .07em;
    }

    svg {
      position: fixed;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 50%;
      max-width: 480px;
      max-height: 340px;
    }

    .path1 {
      stroke-dashoffset: 1000;
      stroke-dasharray: 1000;
    }

    .frame1 {
      height: 500px;
    }
    </style>

    <div class="mydiv" style="height:1000px;">
    <div class="frame1"></div>

    <svg viewBox="-2 -2 236 342" version="1.1">

      <g stroke="#444" stroke-width="2" fill="none">

        <path class="path1" d="M169.185,102.329c-1.164-1.158-3.055-1.158-4.219,0l-40.27,40.27V48.204   c0-18.086-14.72-32.818-32.818-32.818H2.983C1.337,15.386,0,16.728,0,18.369c0,1.647,1.337,2.983,2.983,2.983h88.888   c14.804,0,26.851,12.053,26.851,26.851v95.703l-41.541-41.577c-1.164-1.158-3.055-1.158-4.219,0c-1.164,1.164-1.164,3.061,0,4.219   l48.093,48.123l48.123-48.123C170.348,105.39,170.348,103.499,169.185,102.329z"></path>

      </g>

    </svg>
    </div><div class="mydiv" style="height:1000px;">
    <div class="frame1"></div>

    <svg viewBox="-2 -2 236 342" version="1.1">

      <g stroke="#444" stroke-width="2" fill="none">

        <path class="path1" d="M169.185,102.329c-1.164-1.158-3.055-1.158-4.219,0l-40.27,40.27V48.204   c0-18.086-14.72-32.818-32.818-32.818H2.983C1.337,15.386,0,16.728,0,18.369c0,1.647,1.337,2.983,2.983,2.983h88.888   c14.804,0,26.851,12.053,26.851,26.851v95.703l-41.541-41.577c-1.164-1.158-3.055-1.158-4.219,0c-1.164,1.164-1.164,3.061,0,4.219   l48.093,48.123l48.123-48.123C170.348,105.39,170.348,103.499,169.185,102.329z"></path>

      </g>

    </svg>
    </div>

Answer 1

首先，让我向您介绍您最好的朋友：浏览器的developer tools。

在FireFox或Chrome（可能是IE）中，您可以通过右键单击元素，选择＆＃34; Inspect Element＆＃34;来打开开发人员工具。从出现的上下文菜单中，然后在开发者工具中，您需要单击＆＃34;控制台＆＃34;选项卡以查看将向您显示任何javascript错误的面板。

在您的网站上这样做时，我发现了这些错误：

footable

这告诉你三件事之一。之一：

没有加载jQuery（通过查看源代码，和/或在控制台中运行一些jQuery命令，我们可以看到您的站点不是这种情况）。

OR

包含footable函数的脚本未正确加载，但正在您的脚本中调用（不在您的问题中，而是在网站上）。

OR

.examples绑定的元素（在本例中为footable）不存在，插件jQuery(function($){ $(document).ready(function() { // your code...不够聪明，不能吹起来。

由于这些错误，超出该脚本的任何脚本都很可能已损坏/未运行。在尝试对特定脚本进行故障排除之前清除它们。

并且，为了获得一些额外的帮助，这里是对您（或其他好的！）代码的评论/观察：

这是多余的 - 这两行完全相同：

jQuery(function($) { 
    // your code...

简化为：

{{1}}

Answer 2

在wordpress中，最好将脚本排入函数文件中。这是我在主题中使用的示例，以确保我的脚本正确加载。下面的代码给出了一个拉入Jquery外部副本的例子，一个外部脚本，以及我在主题中的一个。

   wp_deregister_script('jquery');
   wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"), false);
   wp_enqueue_script('jquery'); wp_enqueue_script('scrollToPlugin','http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js');
   wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', 'jquery', false, true );

麻烦让Javascript在Wordpress上运行

2 个答案: