CSS / Javascript - fadeIn effect not working on Sa

2019-07-19 02:25发布

站内问答 / JavaScript
467 2 4

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.

This is the code -

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' );

UPDATE -

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);">&#43;</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 -->

2条回答
乱世女痞
2楼-- · 2019-07-19 02:53

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");
        }
      });
    }
  });
});
查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
3楼-- · 2019-07-19 03:04

For safari use webkit

section {
  opacity: 0;
  -webkit-transform: translate(0, 10px); 
  -webkit-transition: all 1s;
  transform: translate(0, 10px); 
  transition: all 1s;
}

section.visible { 
  opacity: 1;
  -webkit-transform: translate(0, 0); 
  transform: translate(0, 0); 
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)