淡入/淡出图像扩展了它周围图像的网格视图答案

【问题标题】：Fading in/out of images expands grid-view of images surrounding it淡入/淡出图像扩展了它周围图像的网格视图
【发布时间】：2014-10-08 08:25:14
【问题描述】：

我有一个图像网格，我打算让它们全部淡入淡出随机图像。当它不在使用 inline-block 的网格中时，我的褪色很好。

但是当我淡入图像时，淡入的图像出现在淡出的图像下方。我想要的是淡入落后淡出的那个，所以有一个平滑的过渡。理解我的意思的最简单方法是这个小提琴：http://jsfiddle.net/5wkcsnv5/67/

有什么想法吗？谢谢

<body>
    <div id="grid">
        <div class="fadein">
            <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%">
            <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" style="width:100%" ">
    <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg " style="width:100% "">
        </div>
        <div>
            <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;">
        </div>
        <div>
            <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;">
        </div>
        <div>
            <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;">
        </div>
        <div>
            <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;">
        </div>
        <div>
            <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;">
        </div>
        <div>
            <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;">
        </div>
        <div>
            <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;">
        </div>
        <div>
            <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="width: 100%;">
        </div>
        <div>
</body>

JavaScript

$('.fadein img:gt(0)').hide();

$(function () {

    var nImages = $(".fadein").children().length;
    var currentImage = 0;
    console.log(nImages);

    setInterval(function () {

        var randomnumber = Math.floor(Math.random() * nImages);
        randomnumber -= 1;

        if (currentImage == randomnumber) randomnumber = (randomnumber < nImages) ? randomnumber + 1 : 0;

        currentImage = randomnumber;
        $('.fadein img').fadeOut(1000);
        $('.fadein > img:eq(' + randomnumber + ')').fadeIn(1000);

    }, 3000);


});

【问题讨论】：

标签： javascript jquery html image

【解决方案1】：

如果您关闭 javascript，您就会知道问题出在哪里，图像是垂直堆叠的。要获得您想要的内容，请使用 position:relative 作为包含的 div，使用 position:absolute 让图像相互折叠，然后使用 z-index 让第一个图像首先出现。一个问题是图像高度 musf 是已知的，因为您还需要在包含 div 上设置它（或者您可以使用 jquery，请参阅更新）

CSS：

#grid {
 width: 500px;
}
#grid div {
    display: inline-block;
    width:30%;
    margin: 0.5em .4em;
    padding:0;
    vertical-align: top;
    overflow: hidden;
    text-align: center;
    position:relative;
    height:100px;
}

.fadein img
{
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}

.fadein img:first-child
{
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}


img {
    width: 100%;   
}

.fadeSpot1 {
    width:10px;
    height:10px;
    overflow:hidden;
    background:#000;
    position:relative;
}

.fadeSpot1 img {
    display:none;
    position:absolute;
    top:0;
    left:0;
}

Fiddle

更新

由于您已经在使用 jquery，您可以使用它来设置父 div 的高度

$('.fadein').css('height', $('.fadein img:first-child').css('height'));

Updated fiddle

【讨论】：

看起来不错。加上 jQuery 代码是可靠的。幸运的是，无论如何我都知道图像高度。感谢您的帮助！