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;

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

2 个答案: