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

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

<!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>