CSS/Javascript-fadeIn效果在Safari上不起作用 [英] CSS / Javascript - fadeIn effect not working on Safari
问题描述
我正在将前端站点加载到Wordpress上，并且已经加载了一些javascript文件，其中一个用于主页上各部分的fadeIn效果.一切在Firefox和Chrome上都能正常运行，但在Safari上无法运行，我不确定为什么.基本上，opacity: 0;规则在Safari中仍然有效，所以当我向下滚动时，我只会得到一个空白页，底部有一个页脚.
I'm loading a front-end site onto Wordpress and have loaded up some javascript files one of which is for a fadeIn effect for the sections on the home page. It all works fine on Firefox and Chrome but won't work in Safari and I'm not sure why. Basically, the opacity: 0; rule is sticking in Safari so when I scroll down I just get a blank page with a footer at the bottom.
浏览器中没有任何标记，所以我有点卡住了.
Nothing's really flagging up in the browser so I'm a little stuck.
这是代码-
FadeIn.js
jQuery(document).on("scroll", function () {
var pageTop = jQuery(document).scrollTop()
var pageBottom = pageTop + jQuery(window).height()
var tags = jQuery("section")
for (var i = 0; i < tags.length; i++) {
var tag = tags[i]
if (jQuery(tag).position().top < pageBottom) {
jQuery(tag).addClass("visible")
} else {
jQuery(tag).removeClass("visible")
}
}
})
// Have put jQuery instead of $ due to error flagging up in Wordpress
style.css
/* Fade in/out */
section {
opacity: 0;
transform: translate(0, 10px);
transition: all 1s;
}
section.visible {
opacity: 1;
transform: translate(0, 0);
}
/* ---------------------- */
functions.php
function html5blankchild_all_scriptsandstyles() {
//Load JS and CSS files in here
wp_register_script ('jquery', get_stylesheet_directory_uri() . 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
wp_register_script ('smooth-scroll', get_stylesheet_directory_uri() . '/js/smooth-scroll.js', array('jquery'));
wp_register_script ('fadein', get_stylesheet_directory_uri() . '/js/fadein.js', array('jquery'));
wp_register_script ('ps', get_stylesheet_directory_uri() . '/js/ps.js',true);
wp_register_style ('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
wp_register_style ('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css');
wp_register_style ('normalize', 'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css');
wp_register_style ('style', get_stylesheet_directory_uri() . '/style.css');
wp_enqueue_script('jquery');
wp_enqueue_script('ps');
wp_enqueue_style( 'font-awesome');
wp_enqueue_style( 'bootstrap');
wp_enqueue_style( 'normalize');
wp_enqueue_style( 'style');
if ( is_front_page() ) {
wp_enqueue_script('fadein');
}
if ( is_front_page() ) {
wp_enqueue_script('smooth-scroll');
}
}
add_action( 'wp_enqueue_scripts', 'html5blankchild_all_scriptsandstyles' );
更新-
header.php
<head><!-- head code goes here --><?head>
<body <?php ?>>
<header>
<nav>
<a href="<?php the_permalink(4); ?>#particle-slider">Home</a>
<a href="#what">What we do</a>
<a href="#who">Who we are</a>
<a href="#partners">Who we work with</a>
<a href="#contact">Say hello</a>
<a href="<?php the_permalink(70); ?>">Blog</a>
</nav>
</header>
Contact.php
<?php /* Template Name: contact */ ?>
<!-- contact template -->
<section id="contact">
<div class="container-fluid">
<div class="secthead"><span style="color: rgb(63,190,150);">+</span><h1>Say hello</h1></div>
<div class="row no-gutters">
<div id="hello">
<p>If you would like to receive a quote for a design project, chat about the weather or send us some chocolates, please pop an email in our inbox, call us or write
us an old fashioned letter on the below contact details</p>
</div>
</div>
</div>
</section>
<!-- contact template -->
推荐答案
您是否等到文档准备好?另外，您可以使用jQuery的 noConflict()模式，而不必始终总是明确地编写jQuery.请尝试以下代码.通过使用jQuery而不是普通循环进行了优化，将变量置于处理程序之外，在窗口上使用滚动等等.
Do you wait until the document is ready? Also, instead of always writing jQuery explicitly you can use jQuery's noConflict() mode. Try the following code. Optimised by using jQuery instead of vanilla loop, putting variables outside the handler, using scroll on the window, and so on.
$.noConflict();
jQuery(document).ready(function($) {
var win = $(window),
doc = $(document),
tags = $("section");
win.on("scroll", function() {
tags.each(function(i, tag) {
if ($(tag).position().top < (doc.scrollTop() + win.outerHeight())) {
$(tag).addClass("visible");
} else {
$(tag).removeClass("visible");
}
});
}
});
});
这篇关于CSS/Javascript-fadeIn效果在Safari上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
