问：我正在尝试使用 CSS 的剪辑路径功能，我理解它并且对我来说效果很好。然后我尝试编写一些 JavaScript 来更改剪辑路径的开始/停止位置。这是我的 CSS：
.background-left {
宽度：100%;
背景颜色：#ff8800；
背景： url("someimage.jpg");
背景尺寸：封面；
背景位置：居中；
高度：100vh；
过渡：全 1s 缓解；
-webkit-clip-path: 多边形(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=" someURL.html";
});
});
});
我对 JavaScript 和 jQuery 还很陌生，所以如果我只是使用一些过时的方法，我深表歉意。我仍然在这里学习我的模块，但我只是想继续练习和挑战自己。在过去的 3 个小时里，我一直在尝试用谷歌搜索这个问题，并在各种论坛上搜索，但我什么也找不到。
我究竟做错了什么？
此外，任何与该问题无关的建议都会让我变得更好。
答：除了这一行，你的 jQuery 看起来还不错：
$(".background-left").css("-webkit-clip-path", "polygon(0 0, 100% 0, 100%, 100%, 0 100%)").delay(1000).queue (function() { window.location.href="someURL.html"; });
Clip-path 是一个具有多边形属性的值。因此，在 jQuery 中，您必须遵循此规则才能将 css 应用于 value 及其属性：
$(selector).css({property:value, property:value, ...})
所以我认为您在该行中的代码应该如下所示：
$(".background-left").css({"-webkit-clip-path": "polygon(0 0, 100% 0, 100%, 100%, 0 100%)"}).delay(1000) .queue(function() { window.location.href="someURL.html"; });
试试看，看看这是否有帮助:)
