Child theme's Javascript file is loaded earlier than parent theme's.
For example, global-child.js is loaded right after jquery-min.js loaded and global.js of the parent theme is located at the bottom of <body> tag in the code.In child theme, JQuery variables without $ should be declared and defined in the $(document).ready().
Weirdly some variables were found 'undefined' in the debugger, if they are defined before/out of $(document).ready() just like twenty seventeen theme's global.js.Firing a code after a jquery animation:
code it in the callback function of animation().Firing a code after a CSS transition, for instance, 'transition: 0.6s ease' which is triggered by something like addClass( 'fade-in' ) call:
$("#selector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });.one() means running the callback only once.
Loading a page/post-specific Javascript:
function load_scripts() {
global $post;
if ( is_page() || is_single() ) {
switch( $post->post_name ) {
case 'home':
wp_enqueue_script( 'home', get_template_directory_uri().'/js/home.js', array( 'jquery' ), '', false);
case 'about-page':
wp_enqueue_script( 'about', get_template_directory_uri().'/js/about-page.js', array( 'jquery' ), '', false);
}
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );
Source: https://wordpress.stackexchange.com/questions/67802/most-efficient-way-to-add-javascript-file-to-specific-post-and-or-pages
