jQuery/JavaScript 函数无法识别"-webkit-clip-path" ？

Question

我正在尝试使用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个小时里，我一直在谷歌上搜索这个问题，并在这里搜索，但我什么都想不出来。

我做错了什么？

Answer 1

试一下，看看它是否有帮助。

$(".background-left").attr("style","-webkit-clip-path: polygon(0 0, 100% 0, 100%, 100%, 0 100%);")

Answer 2

如果其他人在这里登陆，希望用javascript设置元素的剪辑路径，则以下方法有效（至少在支持多边形剪辑路径的浏览器中有效）：

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;