クリック時のDIV位置を変更してjQueryをアニメーション化する

Question

アニメーションを中央から左に移動しようとしています。DIVをjQueryでクリックします。親divはposition:relativeで、私は考えていたのは、onclick the parent DIV位置が相対から絶対に変更され、アニメーション機能が実行されますが、機能していません。クリックすると中央から左に移動します。アニメーションは表示されません。

$("#bx1 > .column-wrapper-inner > a ").click(function(){ 
    $(".custom-col-md-2").css({position: "absolute"}); 
    $(".column-wrapper").css({position: "absolute"}).animate({left: '50px'}, "slow"); 
});  

注：を私は、グリッド内にあるデフォルトの要素などによって、デフォルトでクリックするだけで、絶対に相対からdivの位置をない変えたいここ

は、私がしようとしているコードです。

誰でもこの手伝いをすることができますか？

UPDATE：ここでは、事前にJsFiddle

おかげです。

Answer 1

どうだ、この（コード内のコメント）

$(document).ready(function() { 
 
    $("#bx1 > .column-wrapper-inner > a ").click(function() { 
 
    var col = $(".custom-col-md-2.column-wrapper-main"); // set the col 
 
    col 
 
     .css({ 
 
     'position': 'absolute', 
 
     'left': '50%', 
 
     'margin-left': -(col.outerWidth()/2) + 'px' // margin left to move box back into middle 
 
     })            // set the css so that it stays centered but has absolute positioning 
 
     .animate({ 
 
     'left': '50px', 
 
     'margin-left': '0' 
 
     });            // animate to the left 
 

 
    }); 
 
});

.custom-col-md-2 { 
 
    width: 400px; 
 
    height: 300px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    background: #ccc; 
 
    padding: 10px; 
 
    border: 1px solid #666; 
 
} 
 

 
.column-wrapper-inner { 
 
    font-size: 16px; 
 
    font-family: arial; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="custom-col-md-2 column-wrapper-main"> 
 
    <div class="column-wrapper animated infinite slideInUp" id="bx1"> 
 
    <div class="column-wrapper-inner"> 
 
     <a href="javascript:;"> 
 
     <h1>Title goes here</h1> 
 
     <p>&nbsp;</p> 
 
     <p>Desceription goes here.</p> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="column-wrapper-hov"></div> 
 
</div>