javascript - JQuery - 右下图像不上升

Question

有人可以帮助我让右下图像在点击时像左下图像一样上升吗？这对我来说真的很重要。非常感谢提前帮助/回答/评论的任何人。

$(document).ready(function() {
  $(document).on('click', '.left', function() {

    var $idl = $('.left').animate({
      'margin-top': '0',
      'width': '500'
    }, 650);

    var $idt = $('.top').animate({
      'margin-left': '253',
      'margin-top': '358',
      'width': '247'
    }, 650);

    var $idr = $('.right').animate({
      'margin-left': '0'
    }, 650);

    $(":animated").promise().done(function() {
      $idt.toggleClass('top right');
      $idl.toggleClass('left top');
      $idr.toggleClass('right left');
    });
  });
});

#img1 {
  position: absolute;
  width: 500px;
  height: auto;
}
.top,
.left,
.right {
  position: absolute;
  height: auto;
  margin-top: 1px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#img2 {
  margin-top: 358px;
  width: 247px;
}
#img3 {
  margin-top: 358px;
  margin-left: 253px;
  width: 247px;
}
#slider {
  width: 504px;
}
.right,
.left {
  cursor: pointer;
}

<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://dovyn.weissfamily.ca/Dovy/PR/1.jpg">
  <img id="img2" class="left" draggable="false" src="http://dovyn.weissfamily.ca/Dovy/PR/2.jpg">
  <img id="img3" class="right" draggable="false" src="http://dovyn.weissfamily.ca/Dovy/PR/3.jpg">
</div>

Answer 1

您只需为 .right 添加另一个点击监听器并相应地修改动画。我假设右 -> 上，上 -> 左，左 -> 右。

JSFiddle here

$(document).on('click', '.right', function() {

    var $idr = $('.right').animate({
      'margin-top': '0',
      'margin-left': '0',
      'width': '500'
    }, 650);

    var $idt = $('.top').animate({
      'margin-left': '0',
      'margin-top': '358',
      'width': '247'
    }, 650);

    var $idl = $('.left').animate({
      'margin-left': '253',
    }, 650);

    $(":animated").promise().done(function() {
      $idt.toggleClass('top left');
      $idl.toggleClass('left right');
      $idr.toggleClass('right top');
    });
});