javascript - JQuery/CSS 触发动画

Question

我正在做一个页面站点。 当我点击下一部分的按钮时，我试图让这个平行四边形消失。 它现在正在使用 asnwers down 但现在我想改变方向从右 ->左到左 ->右 我也有相同的动画 wi 高度，所以它隐藏了盒子

$(document).ready(function() {
  $("a.article").click(fucntion() {
    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>

如何从左到右？

附言全新的 JQuery

Answer 1

在这里修复你的js

JS

$(function(){
 $('.article').click(function(){
   var para = $("#parallelogram");
   para.animate({
        width: '0px'
    }, "slow");
 })
})

DEMO