jqが反応しません。

前提・実現したいこと

下記の通り、カーソルを写真に載せると、写真の詳細の説見えが表示されるようにしたいです

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

1.Uncaught TypeError: $(...).children(...).stop(...).FadeIn is not a function
    at HTMLLIElement.<anonymous> (script.js:11)
    at HTMLLIElement.handle (jquery-3.6.0.min.js:2)
    at HTMLLIElement.dispatch (jquery-3.6.0.min.js:2)
    at HTMLLIElement.v.handle (jquery-3.6.0.min.js:2)

2Uncaught TypeError: $(...).children(...).stop(...).FadeIn is not a function
    at HTMLLIElement.<anonymous> (script.js:11)
    at HTMLLIElement.handle (jquery-3.6.0.min.js:2)
    at HTMLLIElement.dispatch (jquery-3.6.0.min.js:2)
    at HTMLLIElement.v.handle (jquery-3.6.0.min.js:2)

該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Lesson12</title>
6<link rel="stylesheet" href="css/reset.css">
7<link rel="stylesheet" href="css/floating_menu.css">
8
9</head>
10<body>
11<header>
12  <h1>Photo Caption</h1>
13</header>
14<main>
15  <ul>
16    <li><img src="img/img1.jpg" alt="photo1：Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." width="320" height="200"></li>
17    <li><img src="img/img2.jpg" alt="photo2：Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." width="320" height="200"></li>
18    <li><img src="img/img3.jpg" alt="photo3：Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua" width="320" height="200"></li>
19    <li><img src="img/img4.jpg" alt="photo4：Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." width="320" height="200"></li>
20    <li><img src="img/img5.jpg" alt="photo5：Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." width="320" height="200"></li>
21    <li><img src="img/img6.jpg" alt="photo6：Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." width="320" height="200"></li>
22  </ul>
23</main>
24<script type="text/javascript" src="Jquery/jquery-3.6.0.min.js"></script>
25<script type="text/javascript" src="Jquery/script.js"></script>
26</body>
27</html>

CSS
1@charset "UTF-8";
2
3body{
4	font-family:Arial, sans-serif;
5	-webkit-font-smoothing:antialiased;
6	color:#333;
7}
8
9header h1{
10	padding:20px 25px;
11	color:#FFF;
12	background:#2f353E;
13	font-weight:bold;
14}
15
16main{
17	display:block;
18	width:1000px;
19	margin:0 auto;
20	padding:60px 20px;
21}
22
23main li{
24	position:relative;
25	float:left;
26	width:320px;
27	margin:0 20px 50px 0;
28	color:#FFF;
29	line-height:2em;
30}
31
32main li:nth-child(3n){
33	margin-right:0;
34}
35
36main li img{
37	vertical-align:bottom;
38}
39
40main div{
41	position:absolute;
42	display:none;
43	width:100%;
44	height:100%;
45	padding:20px;
46	background:rgba(17, 179, 179, .7);
47	top:0;
48	left:0;
49	box-sizing:border-box;
50}
51
52main p{
53	position:relative;
54	top:10px;
55}

Jq
1$(function(){
2   $("li").append("div");
3   $("div").each(function(){
4    $(this).html("<p>"+$(this).parents().children("img").attr("alt")+ "</p>");
5   });
6
7//li要素をマウスオーバー
8$("li").hover(function(){
9
10   //キャプション部分の表示：フェードイン
11   $(this).children("div").stop().FadeIn(300);
12   //キャプション時のテキスト位置:10px→0pxへ移動
13   $(this).children("div").children("p").stop().animate({"top":0},300);
14
15},function(){
16   //キャプション部分の非表示,
17   $(this).children("div").stop().fadeOut(300);
18
19   //キャプションのテキスト位置:0pxから10pxへ移動
20   $(this).children("div").children("p").stop().animate({"top":"10px"},300);
21
22});
23});