2017-02-06 3 views
0

自分のサイトで自分のページの1つにスクリプトを追加しようとしています。私は正常に別のページに正確に同じスクリプトを追加し、それは働いたが、何らかの理由で、他のページで動作しません。私はページ上のスクリプト全体を変更して、スクリプトが正常に動作するページと多かれ少なかれ同一であるが、残念ながら何も変更していない。スライドイン効果(ボトムアップ)が機能しない

スクリプトの動作中のページ無関係なスクリプトが)ここで見つけることができます:ここで

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"); 
    } 
    }); 

}); 
+0

参考: - https://codepen.io/Javarome/post/full-page-sliding – Darshak

答えて

1

コードペンのデモは、あなたが動作するように期待したものであれば、多分あなたは、CSSをチェックする必要がありますあなたが他のものを見逃しているかどうか見てください。私はクラスが "既に見える"と "来る"と定義されていることを見ていない、私はまた、一見アニメーション関連のCSSやJSを見ていない。 JSが行うことは、可視性に応じてそれらの要素にクラス名を割り当てることです。その振る舞いを定義するものは何もありません。

+0

どのように恥ずかしい...私はいくつかのCSSコード行を見逃していました。私は何か他のものがあると確信していた... – Lavonen

関連する問題