JQuery 是否可以让一张图片淡出而另一张图片在彼此之上淡入而不必弄乱它们的位置？

Question

我认为最好的证明方法是使用 jsfiddle example。您可能会从这个示例中注意到，当第二张图像淡入时，第一张图像会淡出，但第二张图像也会将第一张图像向下推。之后，当下一张图片开始淡入时，当前显示的图片将立即消失。此外，Whosebug 需要带有 jsfiddle 链接的代码，所以这是我的 HTML:

<div id="slideshow">
    <img width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
    <img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
    <img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" />
    <img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div><!--slideshow-->

这是我的 JQuery:

$(function () {
    //make the div take up the space given
    $('div#slideshow').width('100%');
    //make each slide fits within that div easily
    $("div#slideshow > img").width("60%");
    //hide the first image
    $('#slideshow img:gt(0)').hide();
    setInterval(function () {
        //put each slide up for six seconds and cause it to fade out while the
        //new one fades in over a period of two seconds
        $('#slideshow :first-child').fadeTo(2000, 0)
            .next('img').fadeTo(2000, 1).end().appendTo('#slideshow');
    }, 6000);
});

我希望图像在彼此之上均匀过渡，但我想在不修改父 div 及其图像的 CSS 位置样式属性的情况下执行此操作。我不喜欢将图像格式化为 position:absolute 属性的原因是它将幻灯片与网页分开。我不喜欢每次每次更改网页上的某些内容时都必须重新定位幻灯片。我非常感谢你能提供的任何帮助，即使你能澄清我所要求的是不可能的。

Answer 1

只需添加此 CSS。我知道您不想使用定位，但没有办法解决。但是，通过在 #slideshow div 上设置 position:relative，img 元素相对于 #slideshow 容器绝对定位，这意味着您可以将 #slideshow 容器移动到任何地方，img 元素将随之移动。

幻灯片{

position: relative;

}

幻灯片 img{

position: absolute;
top:0;
left:0;

}

这里是修改后的fiddle：https://jsfiddle.net/75wczrw7/5/

JQuery 是否可以让一张图片淡出而另一张图片在彼此之上淡入而不必弄乱它们的位置？

Is it possible with JQuery to have one image fade out & another fade in on top of each other without having to mess with their positioning?

javascript

jquery

slideshow

幻灯片{

幻灯片 img{