javascript - jQuery-右下图不上

单击左下图时，是否可以帮助我使右下图上升？这对我来说真的很重要。非常感谢任何事先提供帮助/回答/评论的人。

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

最佳答案

您只需要为.right添加另一个Click侦听器，并相应地修改动画。我假设右边->顶部，顶部->左边，左边->右边。

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');
    });
});