我正在开发一个具有大量动画效果的Wordpress网站 - 更改标签上的淡入和淡出等。其中一个我在元素处于视口中时从底部滑入框中。我正在使用这个脚本:
function checkVisible() {
var elm = this;
var eval = eval || "visible";
var vpH = $(window).height(),
st = $(window).scrollTop(),
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (eval == "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
}
$(window).scroll(function(){
$('.module').filter(checkVisible).addClass('come-in');
});
$( document ).ready(function() {
$('.module').filter(checkVisible).addClass('come-in');
});
它不是我的,我在Stackoverflow上发现了它。 问题是,它工作了一段时间,但一段时间后它开始变得奇怪: 在大多数子页面中,它只是添加了“进入”的子页面。甚至没有检查&#39;模块&#39;是否在视口中。 在&#39; post&#39;它工作的页面..但从底部滚动到顶部。
正如我读到的那样,很多问题可能是由双jquery CDN引起的,但我不认为这是问题所在:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>OsiemZero</title>
<script type="text/javascript">document.body.className+='animate-in'</script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://serwer1460278.home.pl/osiemzero_wp/wp-content/themes/osiemzero/js/animations.js"></script>
<script src="http://serwer1460278.home.pl/osiemzero_wp/wp-content/themes/osiemzero/js/custom_css.js"></script>
<script type='text/javascript' src='http://serwer1460278.home.pl/osiemzero_wp/wp-content/plugins/ml-slider/assets/sliders/flexslider/jquery.flexslider-min.js?ver=3.3.6'></script>
<link rel='stylesheet' id='metaslider-flex-slider-css' href='http://serwer1460278.home.pl/osiemzero_wp/wp-content/plugins/ml-slider/assets/sliders/flexslider/flexslider.css?ver=3.3.6' type='text/css' media='all' property='stylesheet' />
<link rel="stylesheet" href=" http://serwer1460278.home.pl/osiemzero_wp/wp-content/themes/osiemzero/css/font-awesome.min.css">
<link rel="stylesheet" href="http://serwer1460278.home.pl/osiemzero_wp/wp-content/themes/osiemzero/css/styles.css">
</head>
我尝试了很多脚本来检查元素是否在视口中(甚至是jquery插件),但是它们具有相同的效果,所以可能不是问题。
感谢您提供任何帮助。