jQuery - 图片捕捉错误的地方

Question

当你点击Img2时，会发生动画，但之后Img3只会抓到Img1的左边！我不知道为什么。

$(document).ready(function() {
  $(document).on('click', '.left', function() {
    $idr = $('.right').attr("id")
    $idl = $('.left').attr("id")
    $idt = $('.top').attr("id")
    $('#' + $idl).animate({
      'margin-top': '0',
      'width': '500'
    }, 650, function() {
      $('#' + $idl).removeClass('left').addClass('top')
    })
    $('#' + $idt).animate({
      'margin-left': '253',
      'margin-top': '358',
      'width': '247'
    }, 650, function() {
      $('#' + $idt).removeClass('top').addClass('right')
    })
    $('#' + $idr).animate({
      'margin-left': '0'
    }, 650, function() {
      $('#' + $idr).removeClass('right').addClass('left')
    })
  })
})

#img1 {
  position: absolute;
  width: 500px;
  height: auto;
}
.left,
.right {
  position: absolute;
  height: auto;
  margin-top: 1px;
  cursor: pointer;
}
#img2 {
  margin-top: 358px;
  width: 247px;
}
#img3 {
  margin-top: 358px;
  margin-left: 253px;
  width: 247px;
}
#slider {
  width: 504px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
  <img id="img1" class="top" draggable="false" src="http://s9.postimg.org/ygz34rwv3/pr1.jpg">
  <img id="img2" class="left" draggable="false" src="http://s9.postimg.org/c2heoju3j/pr2.jpg">
  <img id="img3" class="right" draggable="false" src="http://s9.postimg.org/rch9vqplr/pr3.jpg">
</div>

Answer 1

这是因为顶部图像没有绝对定位所以在动画之后占据空间。您可以通过向.top类添加position属性来修复它：

.top, .left, .right {
    position: absolute;
    height: auto;
    margin-top: 1px;
    cursor: pointer;
}

演示：http://jsfiddle.net/z3neveug/2/

以下是one more version同样的重构javascript代码。

Answer 2

将display:inline;添加到.left, .right伪类。

另外，添加此规则：

.left {
    left:0
}

演示：http://jsfiddle.net/t6u6h6x9/1/