wordpressにjQuery.inviwe.jsとanimete.cssを利用して動きをつけたい。

前提・実現したいこと

jquery inview.js で文字に動きをつけようとしてます。

発生している問題・エラーメッセージ

Uncaught TypeError: $ is not a function
    at slideAnime (main.js?ver=5.7:3)
    at main.js?ver=5.7:24
    at dispatch (jquery-3.4.1.min.js?ver=5.7:2)
    at v.handle (jquery-3.4.1.min.js?ver=5.7:2)

slideAnime	@	main.js?ver=5.7:3
(anonymous)	@	main.js?ver=5.7:24
dispatch	@	jquery-3.4.1.min.js?ver=5.7:2
v.handle	@	jquery-3.4.1.min.js?ver=5.7:2
load (async)		
add	@	jquery-3.4.1.min.js?ver=5.7:2
(anonymous)	@	jquery-3.4.1.min.js?ver=5.7:2
each	@	jquery-3.4.1.min.js?ver=5.7:2
each	@	jquery-3.4.1.min.js?ver=5.7:2
Ae	@	jquery-3.4.1.min.js?ver=5.7:2
on	@	jquery-3.4.1.min.js?ver=5.7:2
(anonymous)	@	main.js?ver=5.7:23

該当のソースコード

Javascript
1function slideAnime($){
2
3   $('.upAnime').each(function(){
4            var elemPos = $(this).offset().top-50;
5            var scroll = $(window).scrollTop();
6            var windowHeight = $(window).height();
7            if (scroll >= elemPos - windowHeight){
8            $(this).addClass("slideAnimeUpDown");
9            $(this).children(".upAnimeInner").addClass("slideAnimeDownUp");
10            }else{
11            $(this).removeClass("slideAnimeUpDown");
12            $(this).children(".upAnimeInner").removeClass("slideAnimeDownUp");
13            }
14            });
15  }
16
17  jQuery(window).on('load', function(){
18    slideAnime();
19  });

function.php

php
1function enqueue_scripts(){
2	wp_enqueue_style('animate-css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css');
3	wp_enqueue_style('general-css', get_stylesheet_directory_uri() . '/css/general.css');
4	wp_enqueue_style('main-css', get_stylesheet_directory_uri() . '/scss/main.css');
5	
6	wp_enqueue_script('jquery-min', 'https://code.jquery.com/jquery-3.4.1.min.js');
7	wp_enqueue_script( 'jquery-inview_js','https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js');
8	wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/main.js');
9
10		
11	wp_enqueue_style('cssreset', 'http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css');
12    wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.2.0/css/all.css');
13	wp_enqueue_style('preconnect', 'https://fonts.googleapis.com');
14	wp_enqueue_style('preconnect', 'https://fonts.gstatic.com');
15	wp_enqueue_style('stylesheet', 'https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
16
17}
18add_action('wp_enqueue_scripts', 'enqueue_scripts');
19
20function custom_print_scripts() {
21  if (!is_admin()) {
22    //デフォルトjquery削除
23    wp_deregister_script('jquery');
24  }
25}
26add_action('wp_print_scripts', 'custom_print_scripts');

html
1
2<h2><span class="slide-in upAnime"><span class="slide-in_inner upAnimeInner">ABOUT US</span></span></h2>

css
1
2.slide-in {
3  overflow: hidden;
4    display: inline-block;
5}
6
7.slide-in_inner {
8  display: inline-block;
9
10}
11
12/* 上下のアニメーション*/
13.upAnime{
14    opacity: 0;
15}
16
17.slideAnimeDownUp {
18    animation-name:slideTextY100;
19    animation-duration:0.8s;
20    animation-fill-mode:forwards;
21    opacity: 0;
22}
23
24@keyframes slideTextY100 {
25    from {
26        transform: translateY(100%);
27        opacity: 0;
28    }
29    to {
30        transform: translateY(0);
31        opacity: 1;
32    }
33}
34.slideAnimeUpDown {
35    animation-name:slideTextY-100;
36    animation-duration:0.8s;
37    animation-fill-mode:forwards;
38    opacity: 0;
39}
40
41@keyframes slideTextY-100 {
42    from {
43    transform: translateY(-100%);
44    opacity: 0;
45    }
46    to {
47    transform: translateY(0);
48    opacity: 1;
49    }
50}

試したこと

１、functions.phpに記述している「main.js」、「jQuery」、「jQuery.inview.js」を</body>の直前に直接、記述しました。
２、「main.js」を下記のように書き直してみました。

javascript
1function slideAnime(){
2
3   jQuery('.upAnime').each(function($){
4            var elemPos = $(this).offset().top-50;
5            var scroll = $(window).scrollTop();
6            var windowHeight = $(window).height();
7            if (scroll >= elemPos - windowHeight){
8            $(this).addClass("slideAnimeUpDown");
9            $(this).children(".upAnimeInner").addClass("slideAnimeDownUp");
10            }else{
11            $(this).removeClass("slideAnimeUpDown");
12            $(this).children(".upAnimeInner").removeClass("slideAnimeDownUp");
13            }
14            });
15  }
16
17  jQuery(window).on('load', function(){
18    slideAnime();
19  });

行動規範の内容に同意します

回答1件

ベストアンサー

js
1function slideAnime($){
2
3   $('.upAnime').each(function(){
4            var elemPos = $(this).offset().top-50;
5            var scroll = $(window).scrollTop();
6            var windowHeight = $(window).height();
7            if (scroll >= elemPos - windowHeight){
8            $(this).addClass("slideAnimeUpDown");
9            $(this).children(".upAnimeInner").addClass("slideAnimeDownUp");
10            }else{
11            $(this).removeClass("slideAnimeUpDown");
12            $(this).children(".upAnimeInner").removeClass("slideAnimeDownUp");
13            }
14            });
15  }
16
17  jQuery(window).on('load', function(){
18    slideAnime(jQuery);//
19  });

投稿2021/08/28 03:12

kei344

総合スコア69583

Timetea

2021/08/28 03:20

ご回答ありがとうございます。ご提示いただいたコードに書き換えたところ、エラー表示はなくなりました。ありがとうございます。しかし、<h２>が表示はされるものの動きがありません。考えられる原因があれば、教えていただけないでしょうか？よろしくお願いします。

kei344

2021/08/28 03:26

「jQuery.inview.js」とはどのライブラリでしょう。検索したときに出る下記のライブラリであるならば、根本的に使い方が違います。【GitHub - protonet/jquery.inview: A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view.】 https://github.com/protonet/jquery.inview

Timetea

2021/08/28 03:34

cssファイルを再度アップロードしたところ、無事表示されました。お騒がせして申し訳ございません。再度、ありがとうございます。

行動規範の内容に同意します