TEL:400-8793-956
当前位置:程序、服务器

使用 JavaScript 更改 -webkit-clip-path 的 CSS,它不起作用

提问者: 近期获赞: 浏览人数: 发布时间:2021-10-08 08:33:19

 问:我正在尝试使用 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"; });
试试看,看看这是否有帮助:)
上一篇: 我已经尝试了 4 门不同的 Wordpress 课程 - 中途被困在测验中
下一篇: 运行 hello.rb 时出错
城市网站导航:无锡网站建设 徐州企业网站定制 常州网站开发哪家好 苏州网站改版 南通网站开发 连云港网站建设 淮安网站建设公司 盐城网站定制 扬州网站改版公司 镇江网站开发 泰州高端网站制作 宿迁高端网站开发 江阴高端网站开发 宜兴建设网站 新沂建设网站 邳州建设网站 常熟建设网站 张家港网站改版 昆山公司网站开发 太仓高端网站制作 丹阳高端网站制作 句容专业建站 泰兴网站制作公司 合肥网站建设 芜湖网站制作 蚌埠网站建设 淮南网站制作哪家好 马鞍山网站建设 铜陵网站制作公司 安庆网站建设公司 黄山网站制作 滁州网站建设 阜阳网站设计 六安网站建设 亳州网站制作 宣城网站建设 巢湖网站建设哪家好 桐城网站制作 天长网站建设 明光网站建设 全椒网站建设 扬中网站建设公司 城市小程序导航: