I am working on a one-page site and I want to make a parallelogram disappear when a button is clicked for the next part. Currently, it is disappearing from right to left but I would like to change the direction to left to right. Additionally, I have a similar animation for height that hides the box.
$(document).ready(function() {
$("a.article").click(function() {
var para = $("#parallelogram");
para.animate({
width: '0px'
}, "slow");
});
});#parallelogram {
width: 600px;
height: 400px;
background: white;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
position: relative;
top: 200px;
left: 430px;
-webkit-transition: width 1s;
/* For Safari 3.1 to 6.0 */
transition: width 1s;
}
#parallelogram:active {
width: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><a class="article" href="#article">Article</a>
</li>
</ul>
</nav>
<div class="page" id="content">
<div id="parallelogram">
</div>
</div>Is there a way to change the animation direction to go from left to right instead?
P.S. I am new to JQuery