jQuery/JavaScript函數不會識別「-webkit-clip-path」？

我想玩CSS的剪輯路徑功能，我知道這對我來說工作得很好。然後我試圖編寫一些JavaScript來改變剪輯路徑的開始/停止位置。這裏是我的CSS：jQuery/JavaScript函數不會識別「-webkit-clip-path」？

.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個小時試圖谷歌這個問題，並在這裏尋找，我不能拿出任何東西。

我在做什麼錯？

來源

2015-12-02 samual daugherty

也請發表您的HTML – cwang

給這個旋轉，看看它是否有幫助。

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

來源

2015-12-02 06:14:42 richessler

這在Chrome 51.0.2704.84中不起作用。 – duhaime

萬一別人的土地在這裏尋找到設置元素的剪輯路徑與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;

來源

2016-08-12 13:22:23 duhaime

非常感謝你！ – vinni

jQuery/JavaScript函數不會識別「-webkit-clip-path」？

回答

相關問題