jQuery slideDownとslideUpが適用されない；；
Q&A
Closed
解決したいこと
JavaScriptとjQueryを勉強中です。
slideDownとslideUpが適用されないため、解決策をご教示いただきたいですorz
【補足】
「適用されない」というのは、slideDownとslideUpの動きが画面に表示されない、という意味です。
下記のコード書いてhtmlファイルをプレビューし、
検証ツールのElementsを確認すると、
<div class="box1" style="background-color: rgb(0, 0, 255); width: 200px; height: 100px; display: none;"></div>
このように記載されています。
発生している問題
以下のように記述しており、slideDownとslideUpが適用されません。
jQueryに記述したcssは適用されています。
【index.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meat charset="utf-8">
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="box1"></div>
<script src="jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
【app.css】
.box1 {
background-color: #FF0000;
height: 200px;
width: 200px;
}
【app.js】
$(function (){
$('.box1').slideDown(function (){
$('.box1').css({
'background-color': '#0000FF',
'width': '200px',
'height': '100px'
}).slideUp();
});
});
自分で試したこと
学習を始めたばかりで、手も足も出ない状況です；；
chatpGPTで以下の4点を確認しました。
・タイプミスはなさそうとのこと。
・最新版のjQueryを使用するよう言われた。
→ 最新版（jQuery 3.7.0）を使用中。
・jquery.min.jsへのファイルパスは間違いないか？
→間違いない。同じディレクトリ下にあり、ファイル名も間違いない。
・開発者ツールのコンソールにエラーメッセージが表示されていないか？
→表示されていない
お手数おかけいたしますが、これ以上学習が進められない状況になってしまい、大変困っております；；
どなたかお返事いただけますと幸いです...；；
0
