clip-path: ellipseとjQueryで背景を透過している円に、クリックしたらその透明な円が広がるアニメーションをつけたい。

現在あるwebサイトのトップページを作っているのですが、呼び出したjQueryで操作しているcssが動いてくれず、困っています。

カーソルの座標を取得しながらカーソルと同じように動く円（clip-pathで作成）がロゴを透過して背景が見えるようにしています。
この状態でマウスをクリックしたときに、その座標から円が大きく広がって背景全体が見えるようなアニメーションをjQueryとCSSで書こうと思ったのですが、**クリックイベントでjQueryの関数は呼び出されるものの、呼び出し先のcssが動いてくれません。**どうしたら良いでしょうか？
サイトのレイヤーとしては

背景画像(GIFアニメーション)
ロゴ
clip-pathで作った円**（←この円の中のみ、ロゴが透過して背景が見えている）**下の画像のような感じ。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <link rel="stylesheet" href="style.css">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
8    <title>Online Resume</title>
9
10</head>
11
12<body>
13
14    <div class="circle"></div>
15    <img src="./images/page1.png" alt="" class="logo">
16
17    <script type="text/javascript">
18        $(function() {
19            let style;
20            $(window).mousemove(function(e) {
21                <!--.cercleのCSSにリアルタイムでマウス座標を入れる-->
22                style = "ellipse(150px 150px at " + e.clientX + "px " + e.clientY + "px)";
23                $(".circle").css("clip-path", style);
24            });
25        });
26        
27        $(function() {
28            $('.circle').click(function() { 
29                $(this).toggleClass("clicked");
30                console.log("clicked!");  <!--このクリックイベントはコンソールに表示されてるのに、clip-path変更のcssが効かない！！-->
31            });
32        });
33    </script>
34</body>
35
36</html>

css
1body {
2    background-image: url(./images/stand1.gif);
3    background-size: cover;
4    background-position: center;
5    background-repeat: no-repeat;
6    padding: 0;
7    margin: 0;
8}
9
10.logo {
11    top: 0;
12    left: 0;
13    width: 100vw;
14    height: 100vh;
15}
16
17.circle {
18    width: 100vw;
19    height: 100vh;
20    position: absolute;
21    background-image: url(./images/stand1.gif);
22    background-size: cover;
23    background-position: center;
24    background-repeat: no-repeat;
25    clip-path: ellipse(150px 150px at 10% 10%);
26    transition: all 1s;
27}
28
29.circle.clicked {
30    width: 100vw;
31    height: 100vh;
32    position: absolute;
33    background-image: url(./images/stand1.gif);
34    background-size: cover;
35    background-position: center;
36    background-repeat: no-repeat;
37    clip-path: ellipse(2000px 2000px at 10% 10%); /*jQueryでこのCSSを呼んでclip-pathの円の大きさを変更できるはず....?あれ...?*/
38}

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

回答1件

ベストアンサー

これ面白いですねw

マウスを動かすと150pxで上書きされてしまうのでクリックした際に 2000px を設定しなおしましょう。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Online Resume</title>

</head>

<body>

    <div class="circle"></div>
    <img src="https://liquipedia.net/commons/images/c/cf/Stand1_Gauntlet.png" alt="" class="logo">

    <script type="text/javascript">
        $(function() {
            let style;
            $(window).mousemove(function(e) {
                <!--.cercleのCSSにリアルタイムでマウス座標を入れる-->
                style = "ellipse(150px 150px at " + e.clientX + "px " + e.clientY + "px)";
                $(".circle").css("clip-path", style);
            });
        });

        $(function() {
            $('.circle').click(function(e) { 
                $(this).toggleClass("clicked");
                <!--.cercleのCSSにリアルタイムでマウス座標を入れる-->
                style = "ellipse(2000px 2000px at " + e.clientX + "px " + e.clientY + "px)";
                $(this).css("clip-path", style);
                console.log("clicked!");  <!--このクリックイベントはコンソールに表示されてるのに、clip-path変更のcssが効かない！！-->
            });
        });
    </script>
</body>

</html>

投稿2020/03/11 12:17