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

Answer 2

您所需要的只是复制左侧图像的函数，对其进行一些修改并使函数在右侧图像上运行。查看小提琴：http://jsfiddle.net/w2yhvka6/

和正确图像的代码：

$(document).on('click', '.right', function() {
var $idl = $('.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 $idr = $('.left').animate({
  'margin-left': '253'
}, 650);
$(":animated").promise().done(function() {
  $idt.toggleClass('top left');
  $idl.toggleClass('right top');
  $idr.toggleClass('right left');
});
});