CODEWITHSUNDEEP
javascriptjqueryhtmlcss
samual daugherty
samual daugherty

Reputation: 19

jQuery/JavaScript function won't recognize "-webkit-clip-path"?

I'm trying to play around with the clip-path feature of CSS, which I understand is working fine for me. I'm then trying to write some JavaScript that changes the start/stop locations of the clip-path. Here's my 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%);
}

My end goal, is that when you click on a button, it fades out all of the content, slides those start/stop points all the way to the edge (revealing the whole image) and then loads the new page. This is my 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";
      });
   });
});

I'm pretty new to JavaScript and jQuery, so I apologize if I'm just using some archaic method. I've spent the past 3 hours trying to Google this issue, and searching around on here, and I can't come up with anything.

What am I doing wrong?

Upvotes: 1

Views: 1567

Answers (2)

duhaime
duhaime

Reputation: 27612

In case others land here looking to set an element's clip path with javascript, the following works (at least in browsers that support polygon clip paths):

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;

Upvotes: 2

richessler
richessler

Reputation: 84

Give this a whirl, and see if it helps.

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

Upvotes: 2

Related Questions