Question

我正在尝试将DIV动画从中心向左移动，默认情况下DIV点击jQuery，其中父div为position:relative，我想的是，onclick父DIV位置将从相对位置更改为绝对位置然后运行animate函数，但它不起作用，它只是在点击时从中心向左移动，没有动画。

以下是我正在尝试的代码：

$("#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>

单击时更改DIV位置并为jQuery设置动画

1 个答案: