淡入/淡出圖像擴展了其周圍圖像的網格視圖

我有一個圖像網格，我計劃讓它們全部淡入和淡出隨機圖像。使用內嵌塊的網格中，當它的不是時，我的淡入淡出效果很好。淡入/淡出圖像擴展了其周圍圖像的網格視圖

但是，當我淡入圖像，淡入的圖像出現在淡出的圖像下方。我想要的是一個在之後淡出的，所以有一個平穩的過渡。最簡單的方法來看看我的意思是這個小提琴：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); 


});

來源

2014-10-07 Harry

如果你關掉你的地方你的問題出現了一個想法的JavaScript，圖像垂直堆疊。要獲得想要的內容，請使用position:relative以包含div，並使用position:absolute使圖像互相摺疊，然後使用z-index獲取第一張圖像。一個問題是圖像高度musf固定一個已知的，你還需要設置這個就containig 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

來源

2014-10-08 00:07:28

看起來不錯。再加上jQuery代碼是堅實的。幸運的是，我確實知道圖像的高度。謝謝您的幫助！ – Harry 2014-10-08 00:59:32

淡入/淡出圖像擴展了其周圍圖像的網格視圖

回答

相關問題