Edit in JSFiddle

function slide(){
    alert('wooo');
    
}
$('#back').click(function(){
    if ($('#cutter').width()>1){
        $('#cutter').animate({width: '0px'}, 900);
    }else{
        $('#cutter').animate({width: '555px'}, 900);
    }
});

<div id="back">
    <div id="cutter">
        <div id="parallelogram">
            <div id="picture"></div>
        </div>
    </div>
</div>
<h1>Click the picture to slide</h1>

#parallelogram {
   width: 100%; 
   height: 175px;
   background: pink;
   
   /* Skew */
   -webkit-transform: skew(30deg); 
   -moz-transform: skew(30deg); 
   -o-transform: skew(30deg);
   transform: skew(30deg);
    overflow:hidden;
    margin-left:-82px;
}
#picture{
    height:100%;
    width:100%;
    
     -webkit-transform: skew(-30deg); 
   -moz-transform: skew(-30deg); 
   -o-transform: skew(-30deg);
   transform: skew(-30deg);
    margin-left:82px;
    background:url('http://www.lenotta.com/wp-content/uploads/2013/06/Screen-Shot-2013-06-18-at-2.19.26-AM.png') no-repeat ;
}
#cutter{
    width:0px;
    height:auto;
    overflow:hidden;
       

}
#back{
    overflow:hidden;
    position:relative;
    width:400px;
    height:175px;
    margin-left:50px;
    background: url('http://www.nollie.tv/skateboarding/photography/books/HughHollandLocalsOnly70sSkatingCapturedAmmoBooksDogtownZBoys_1.jpg') center center;
}
h1{
    font-family: 'Helvetica';
    color: #333;
    font-weight: 200;
    text-align:center;
}