WordPress主页上未加载/运行jQuery

时间:2016-03-26 作者:blackhill24

我希望有人能帮忙。我正在尝试使用我找到的jQuery脚本在scroll上制作一些动画。我想我已经把它读出来了$jQuery 由于Wordpress以无冲突模式运行,但到目前为止,我无法让脚本执行任何操作。

以下是JS:

   jQuery(document).ready(function($) {
$(function() {

  var $window           = $(window),
      win_height_padded = $window.height() * 1.1,
      isTouch           = Modernizr.touch;

  if (isTouch) { $(\'.revealOnScroll\').addClass(\'.animated\'); }

  $window.on(\'scroll\', revealOnScroll);

  function revealOnScroll() {
    var scrolled = $window.scrollTop(),
        win_height_padded = $window.height() * 1.1;

    // Showed...
    $(".revealOnScroll:not(.animated)").each(function () {
      var $this     = $(this),
          offsetTop = $this.offset().top;

      if (scrolled + win_height_padded > offsetTop) {
        if ($this.data(\'timeout\')) {
          window.setTimeout(function(){
            $this.addClass(\'.animated \' + $this.data(\'animation\'));
          }, parseInt($this.data(\'timeout\'),10));
        } else {
          $this.addClass(\'.animated \' + $this.data(\'animation\'));
        }
      }
    });
    // Hidden...
   $(".revealOnScroll.animated").each(function (index) {
      var $this     = $(this),
          offsetTop = $this.offset().top;
      if (scrolled + win_height_padded < offsetTop) {
        $(this).removeClass(\'.animated .fadeInUp .flipInX .lightSpeedIn\')
      }
    });
  }

  revealOnScroll();
});

        });
我不擅长jQuery,但任何指针都会很好。我很确定问题出在脚本中,没有添加或删除任何类。

1 个回复
最合适的回答,由SO网友:Mehul Gohil 整理而成

您已经初始化了两次脚本。以下是更新的脚本:

jQuery(document).ready(function($) {
var $window           = $(window),
win_height_padded = $window.height() * 1.1,
isTouch           = Modernizr.touch;

if (isTouch) { $(\'.revealOnScroll\').addClass(\'.animated\'); }

$window.on(\'scroll\', revealOnScroll);

function revealOnScroll() {
    var scrolled = $window.scrollTop(),
    win_height_padded = $window.height() * 1.1;

    // Showed...
    $(".revealOnScroll:not(.animated)").each(function () {
        var $this     = $(this),
        offsetTop = $this.offset().top;

        if (scrolled + win_height_padded > offsetTop) {
            if ($this.data(\'timeout\')) {
                window.setTimeout(function(){
                    $this.addClass(\'.animated \' + $this.data(\'animation\'));
                }, parseInt($this.data(\'timeout\'),10));
            } else {
                $this.addClass(\'.animated \' + $this.data(\'animation\'));
            }
        }
    });
   // Hidden...
   $(".revealOnScroll.animated").each(function (index) {
       var $this     = $(this),
       offsetTop = $this.offset().top;
       if (scrolled + win_height_padded < offsetTop) {
           $(this).removeClass(\'.animated .fadeInUp .flipInX .lightSpeedIn\')
       }
   });
}

revealOnScroll();
});
UPDATE: 此脚本不起作用,因为您在Javascript中使用了jQuery脚本,但该脚本不起作用。您需要使用javascript或jQuery。

revealOnScroll()是一个javascript函数。此函数中使用的每个函数都是jQuery函数。请明确您是要使用jQuery还是javascript。

UPDATE 1:

在jquery之后添加此脚本。您错过的js。

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
希望这有帮助!

相关推荐

JQuery php请求返回一个奇怪的结果

我有一个奇怪的小故障发生在我身上,我不知道我是如何产生它的,或者它是否是正常的。我正在开发自己的插件,当一个足球队/足球队被输入到一个框中时,它会检查它是否已经在数据库中。以下是我的代码行add_action( \'admin_footer\', \'fws_teamcheck_javascript\' ); function fws_teamcheck_javascript() { ?> <script type="text/javascript">