有可能用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?

本文关键字：淡出 不必 顶部 位置 他们的 有一个 JQuery 图像 有可能 另一个      更新时间：2023-09-26

我认为最好的演示方法是使用jsfiddle示例。从这个例子中您可能会注意到，当第二张图像逐渐淡入时，第一张图像会逐渐淡出，但是第二张图像也会将第一张图像向下推。之后，当前显示的图像将立即消失，当下一个图像开始淡入。此外，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属性的原因是因为它将幻灯片从网页中分离出来。我不喜欢每次更改网页内容时都要重新定位幻灯片。我非常感谢你能给予的任何帮助，即使你能澄清我所要求的是不可能的。

添加这个CSS。我知道你不想用定位，但没办法。然而，通过在#slideshowdiv上设置position:relative, img元素的绝对位置相对于#slideshow容器，这意味着你可以将#slideshow容器移动到任何地方，img元素都会跟着移动。

<标题> slidshow {
position: relative;

}

<标题>幻灯片img {
position: absolute;
top:0;
left:0;

}

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

相关文章：