【问题标题】：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?使用 JQuery 是否有可能让一个图像淡出和另一个淡入淡出，而不必弄乱它们的位置？
【发布时间】：2015-09-04 02:38:03
【问题描述】：

我认为证明这一点的最佳方式是使用jsfiddle example。从这个例子中你可能会注意到，第一个图像确实随着第二个图像的淡入而淡出，但第二个图像也将第一个图像向下推。之后，当前显示的图像将在下一张图像开始淡入时立即消失。此外，StackOverflow 需要带有 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 属性的原因是因为它将幻灯片与网页分开。我不喜欢每次更改网页上的内容时都必须重新定位幻灯片。。我非常感谢您提供的任何帮助，即使您可以澄清我所要求的内容是不可能的。

【问题讨论】：

标签： javascript jquery slideshow

【解决方案1】：

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

幻灯片放映{

position: relative;

}

幻灯片图片{

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

}

这是修改后的小提琴：https://jsfiddle.net/75wczrw7/5/

【讨论】：