jQuery-淡入和淡出时如何使图像重叠？

Question

所以我有这个：

https://jsfiddle.net/ysr50m2m/1/

HTML

class="photoset">
      <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
      <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
      <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
      <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
    </div>

    <div class="photoset">
      <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals26.jpeg" />
      <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals14.jpg" />
      <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion.jpg" />
      <img src="https://framboisemood.files.wordpress.com/2013/04/fashion-zoo-animals13.jpg" />
      <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals9.jpg" />
    </div>

的CSS

.photoset > img:not(:first-child) {
  display: none;
}

的JavaScript

 $(document).ready(function() {
    $('.photoset').each(function(){
        $(this).data('counter', 0);
    });

    var showCurrent = function(photoset) {
        $items = photoset.find('img');
        var counter = photoset.data('counter');
        var numItems = $items.length;
        var itemToShow = Math.abs(counter % numItems); 
        $items.fadeOut();
        $items.eq(itemToShow).fadeIn();
    };

    $('.photoset').on('click', function(e) {
        e.stopPropagation();
        var photoset = $(this);
        var pWidth = photoset.innerWidth();
        var pOffset = photoset.offset();
        var x = e.pageX - pOffset.left;
        if (pWidth / 2 > x) {
            photoset.data('counter', photoset.data('counter') - 1);
            showCurrent(photoset);
        } else {
            photoset.data('counter', photoset.data('counter') + 1);
            showCurrent(photoset);
        }
    });
});

我希望图像重叠。 当我单击图像时，下一个图像首先出现在底部，然后出现在第一张图像的位置。

我该如何解决这个问题？ 提前致谢。

Answer 1

由于2个元素除非处于相同的位置，否则它们不能占据相同的位置，因此我将另一个图像绝对放置在前一个图像的上方，并且当前一个图像消失时，我删除了绝对位置。

小提琴： https : //jsfiddle.net/qu1Lxjo1/

CSS：

.photoset {
  position: relative;
}

.photoset img {
  position: relative;
  top: 0px;
  left: 0pxx
}

JS：

$items.fadeOut();
    $items.eq(itemToShow).fadeIn({done: function() {
        $(this).css('position','relative')
    }}).css('position', 'absolute');
};