使用JQuery可以使一個圖像淡出，而另一圖像淡入彼此，而不必弄亂它們的位置嗎？

Question

我認為，證明這一點的最佳方法是使用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屬性，是因為它將幻燈片放映與網頁分開。 我不希望每次更改網頁上的內容時都必須重新定位幻燈片。 我非常感謝您可以提供的任何幫助，即使您可以澄清我所要求的也是不可能的。

Answer 1

只需添加此CSS。 我知道您不想使用定位，但是無法解決。 但是，通過在#slideshow div上設置position：relative，img元素相對於#slideshow容器是絕對定位的，這意味着您可以將#slideshow容器移動到任何位置，並且img元素也會隨之而來。

幻燈片{

position: relative;    

}

幻燈片img {

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

}

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