淡入/淡出图像扩展了其周围图像的网格视图 [英] Fading in/out of images expands grid-view of images surrounding it
问题描述
但是当我淡入图像时，在淡出的一个下面出现淡出。我想要的是一个渐渐淡出的人，所以有一个平稳的过渡。最简单的方法来看看我的意思是这个小提琴： http://jsfiddle.net/5wkcsnv5/67/
有什么想法？谢谢
< body>
< div id =grid>
< div class =fadein>
< img src =http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpgstyle =width：100％>
< img src =http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpgstyle =width：100％>
< img src =http ：//farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpgstyle =width：100％>
< / div>
< div>
< img src =http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpgstyle =width：100％;>
< / div>
< div>
< img src =http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpgstyle =width：100％;>
< / div>
< div>
< img src =http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpgstyle =width：100％;>
< / div>
< div>
< img src =http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpgstyle =width：100％;>
< / div>
< div>
< img src =http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpgstyle =width：100％;>
< / div>
< div>
< img src =http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpgstyle =width：100％;>
< / div>
< div>
< img src =http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpgstyle =width：100％;>
< / div>
< div>
< img src =http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpgstyle =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）;
}）;
在出现问题的地方，图像会垂直堆叠。为了得到你想要的东西，使用 position：relative 来包含div，并且 position：absolute 来让图像折叠到然后使用 z-index 来让第一个图像先出现。一个问题是图像高度musf被固定一个已知的，因为你还需要设置这个在containsig div上（或者你可以使用jquery，见更新）
CSS ：
#grid {
width：500px;
}
#grid div {
display：inline-block;
宽度：30％;
保证金：0.5em .4em;
padding：0;
vertical-align：top;
overflow：hidden;
text-align：center;
职位：亲属;
height：100px;
}
.fadein img
{
position：absolute;
top：0;
剩下：0;
z-index：0;
}
.fadein img：first-child
{
position：absolute;
top：0;
剩下：0;
z-index：0;
}
img {
width：100％;
}
.fadeSpot1 {
width：10px;
height：10px;
overflow：hidden;
背景：＃000;
职位：亲属;
}
.fadeSpot1 img {
display：none;
位置：绝对;
top：0;
剩下：0;
}
更新
因为你已经使用jQuery，你可以使用它来设置父div的高度。
$ p $ $（'。fadein' ）.css（'height'，$（'。fadein img：first-child'）。css（'height'））;
I have a grid of images and I'm planning on having them all fade random images in and out. I have the fading fine when it isn't in a grid using inline-block.
But when I fade images in, the image that is fading in appears below the one fading out. What I want is the one fading in to be behind the one fading out, so there is a smooth transition. The easiest way to see what I mean is this fiddle: http://jsfiddle.net/5wkcsnv5/67/
Any ideas? Thanks
<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);
});
If you turn off the javascript you get an idea of where your problem arises, the images are stacked vertically. To get what you want use position:relative for the containing div and position:absolute to get the images to collapse onto each other, then use z-index to get the first image to appear first. The one issue is the image height musf be fixed an known, as you also need to set this on the containig div (or you could use jquery, see update)
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;
}
Update
As you are already using jquery, you could use that to set the height of the parent div
$('.fadein').css('height', $('.fadein img:first-child').css('height'));
这篇关于淡入/淡出图像扩展了其周围图像的网格视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
