javascript - 滑入效果(自下而上)不起作用

Question

我正在尝试将脚本添加到我网站上的一个页面，这是一种过渡效果，其中 div 在 View 中从下向上移动。我成功地将完全相同的脚本添加到另一个页面并且它有效，但由于某种原因，它在另一个页面上不起作用。我更改了页面上的整个脚本，因此它或多或少与脚本正常工作的页面相同，但它没有改变任何东西，不幸的是......

可以在此处找到运行脚本的页面(删除了所有不相关的脚本):http://codepen.io/anon/pen/qRKgWY

这是脚本(应该是正确的):

(function($) {

     $.fn.visible = function(partial) {

     var $t            = $(this),
     $w            = $(window),
     viewTop       = $w.scrollTop(),
     viewBottom    = viewTop + $w.height(),
     _top          = $t.offset().top,
     _bottom       = _top + $t.height(),
     compareTop    = partial === true ? _bottom : _top,
     compareBottom = partial === true ? _top : _bottom;

 return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

 };

 })(jQuery);

 var win = $(window);

 var allMods = $("#slide-1, #slide-2");

 allMods.each(function(i, el) {
     var el = $(el);
         if (el.visible(true)) {
         el.addClass("already-visible"); 
         } 
 });

 win.scroll(function(event) {

   allMods.each(function(i, el) {
     var el = $(el);
     if (el.visible(true)) {
       el.addClass("come-in"); 
     } 
   });

 });

Answer 1

如果代码笔上的演示符合您的预期，也许您需要检查 css 或查看是否遗漏了其他任何内容。我没有看到任何类被定义为“已经可见”和“进来”，乍一看我也没有看到任何与动画相关的 CSS 或 JS。 JS 所做的只是根据可见性为这些元素分配一个类名，没有定义其行为。