更改点击的DIV位置并为jQuery设置动画

Question

我正在尝试将具有动画的DIV从中心移到左侧，并且默认情况下是在jQuery单击时单击DIV ，其中父div的position:relative是position:relative ，我在想的是，onclick父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的位置从相对位置更改为绝对位置，而不是默认情况下，因为默认情况下元素位于网格中。

谁能帮忙！

更新 ：这是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>