jQuery/JavaScript函数赢得'；“不承认”-webkit剪辑路径“；？

我正在尝试使用CSS的剪辑路径特性，我知道这对我来说很好。然后我尝试编写一些JavaScript来更改剪辑路径的开始/停止位置。以下是我的CSS：

.background-left {
    width: 100%;
    background-color: #ff8800;
    background: url("someimage.jpg");
    background-size: cover;
    background-position: center center;
    height: 100vh;
    transition: all 1s ease;
    -webkit-clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
}

我的最终目标是，当你点击一个按钮时，它会淡出所有内容，将开始/停止点一直滑动到边缘（显示整个图像），然后加载新页面。这是我的JS：

$( "#button" ).click(function() {
   $("#content").fadeOut(2000).delay(400).queue(function() {
      $(".background-left").css("-webkit-clip-path", "polygon(0 0, 100% 0, 100%, 100%, 0 100%)").delay(1000).queue(function() {
         window.location.href="portraits.html";
      });
   });
});

我对JavaScript和jQuery非常陌生，所以如果我只是使用了一些过时的方法，我很抱歉。在过去的3个小时里，我一直在用谷歌搜索这个问题，在这里到处搜索，但我什么都想不出来

---

我做错了什么？

试一试，看看是否有帮助

---

$（“.background left”）.attr（“样式”，“-webkit剪辑路径：多边形（0,100%0,100%，100%，0,100%）；”）

尝试一下，看看是否有帮助

---

$（“.background left”）.attr（“style”，“-webkit剪辑路径：polygon（0,100%0,100%，100%，0,100%）；”）

如果其他人来到这里，希望用javascript设置元素的剪辑路径，那么以下方法可以起作用（至少在支持多边形剪辑路径的浏览器中）：

---

如果其他人来到这里，想用javascript设置元素的剪辑路径，那么下面的方法是有效的（至少在支持多边形剪辑路径的浏览器中是有效的）：

---

请同时发布您的html请同时发布您的html

var clipPath = "polygon(100% 0, 50% 50%, 100% 100%)";

var myDiv = document.getElementsByClassName("super-div")[0];
myDiv.style.webkitClipPath = clipPath;
myDiv.style.mozClipPath = clipPath;
myDiv.style.msClipPath = clipPath;
myDiv.style.oClipPath = clipPath;
myDiv.style.clipPath = clipPath;