title: jQuery/JavaScript function won't recognize "-webkit-clip-path"?
body: <p>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:</p>
  
  <pre><code>.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%);
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>$( "#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";
        });
     });
  });
  </code></pre>
  
  <p>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. </p>
  
  <p>What am I doing wrong?</p>