时间戳

首页 > 解决方案 > Javascript 动画在 HTML 页面上不起作用

javascript - Javascript 动画在 HTML 页面上不起作用

问题描述

我的脚本中有几个动画，但它们不起作用。我无法确定问题所在。什么可能会阻止这些动画运行？

我已经在自己的 html 页面中尝试了每个动画，它们工作正常。

jQuery(document).ready(function($){
  var $timeline_block = $('.cd-timeline-block');

  //hide timeline blocks which are outside the viewport
  $timeline_block.each(function(){
    if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
      $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
    }
  });

  //on scolling, show/animate timeline blocks when enter the viewport
  $(window).on('scroll', function(){
    $timeline_block.each(function(){
      if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
        $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
      }
    });
  });
});

动画一旦并入我的网站就不起作用。

标签： javascriptjquery

解决方案

看到你的回购。在第 542 行的 index.html 中添加一个类cssanimations

    <section id="cd-timeline" class="cd-container cssanimations">

顺便说一句，您在body标签内使用了body标签。萨利这是不对的。

推荐阅读