

開発環境：  
Windows10 64bit  
ブラウザ：GoogleChrome 69.0.3497  
エディタ：Brackets(ﾘﾘｰｽ 1.13 ﾋﾞﾙﾄﾞ 1.13.0-17696)  
使用言語：HTML/CSS/Javascript/jQuery

<概要>  
jQueryの勉強中です。  
「Webページの図面(丸*1、四角*2)をクリックしたら、その図面がフェードアウトしていく」という動きをさせるため、fadeOutを指定しましたが、図面をクリックしてもフェードアウトしません(何も起こりません)。どこを修正したらよいでしょうか？

[code]

    <!DOCTYPE html>
    <html>
        <head>
            <style>
            #circle {
                width:150px;
                height:150px;
                border-radius: 50%;
                background-color:green;
                margin:10px;
            }
            .square {
                width:150px;
                height:150px;
                background-color: red;
                margin:10px;
            }
            </style>
    
        </head>
        <body>
            <!--
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
            </script>
            -->
            <script src="jquery-3.3.1.slim.min.js"></script>
    
            <div id="circle"></div>
            <div class="square"></div>
            <div class="square"></div>
    
            #HTML要素をクリックしたらフェードアウトさせたい
            <script type="text/javascript">
                $("div").click(function(){
                    $(this).fadeOut();
                })
    
            </script>     
        </body> 
    </html>
    
[/code]


CC BY-SA 4.0
2018-09-25T20:22:24.230
48707
2020-07-27T14:07:15.767
2018-09-25T23:39:35.143
2238
30112
question
javascript html jquery css
要素(図面）をクリックしたらfadeOutさせたい


エラー内容(Uncaught TypeError: $(...).fadeOut is not a
function)で調べたところ、stackoverflowで似たような質問をされてる方がいました。それによれば
「アニメーションエフェクトは"スリム"なjQueryだと使えないから、"フル"のjQueryを導入すればいい」とのことでしたので検討してみます。ひとまず解決とさせて頂きます。コメントを頂きありがとうございました。

<https://stackoverflow.com/questions/934446/why-does-jquery-throw-the-error-
fadeout-is-not-a-function>


CC BY-SA 4.0
2018-09-26T00:43:41.027
48710
2018-09-26T00:43:41.027
30112
48707
answer