淡入和淡出图像使内联块样式div混乱

Question

我有一个图像网格，我想让每个图像随机淡入和淡出。 我有gridview，也有用于淡入和淡出图像的JS代码。 但是，当我在图像网格上实现JS代码时，它无法按预期工作。

加载图像时，其div的大小会更改，整个网格div也会扩展。

这是我的意思： http : //jsfiddle.net/5wkcsnv5/10/

我怎样才能解决这个问题？ 谢谢！

<html>
<head>
<title>3x3</title>
 <!-- jQuery Reference -->
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <!-- Your Script -->
  <script type='text/javascript'>
$(function(){
      // Hide all images except the first within your "fade In" <div>
      $('.fadein img:gt(0)').hide();
      // Set an interval to occur every 3 seconds (3000ms)
      setInterval(function(){
        // Fade out the first element and fade in the next and then move the elements
        $('.fadein :first-child').fadeOut()
           .next('img').fadeIn()
           .end().appendTo('.fadein');}, 
        1000);
  });
  </script>
<style type="text/css">
    #grid {
        width: 475px;
        margin: 1em auto;
    }

    #grid div { display: inline-block; width:30%; margin: 0.5em 0; padding:0; }
    #grid div p { text-align: center; margin:0; padding:0; }
    #grid div p:first-child { font-weight: bold; }
</style>
</head>
<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>
</html>

Answer 1

这是解决该问题的一种方法。

如下修改CSS：

#grid {
    width: 475px;
    margin: 1em auto;
}
#grid div {
    display: inline-block;
    width:30%;
    height: 13.25vw;
    margin: 0.5em 0;
    padding:0;
    border: 1px dotted blue;
    vertical-align: top;
    overflow: hidden;
}
#grid div p {
    text-align: center;
    margin:0;
    padding:0;
}
#grid div p:first-child {
    font-weight: bold;
}

将#grid div的高度设置为与缩略图的纵横比相对应的高度。

我使用了height: 13.25vw因此高度基于初始包含块（视口）的宽度，因此您可以在设计中保持一些响应性。

您可能需要对此给予更多注意。

最后，使用overflow: hidden 。

这种构造将第一个行内块元素保持为固定大小，而不管其中包含多少个图像元素。

动画受到内联块可变高度的影响，该可变高度将根据显示或隐藏的图像（即，将显示块设置为div）而改变。

观看演示： http : //jsfiddle.net/audetwebdesign/6wey831p/

否则，您的HTML和jQuery可以正常工作。

Answer 2

我猜你想要这样的小提琴 ..

单次运行：

 setInterval(function() { // Fade out the first element and fade in the next and then move the elements $('.fadein :first-child').fadeOut(1000, function() { $(this).next('img').fadeIn(1000) $(this).appendTo('.fadein'); $(this).remove(); }); }, 1000);

多次提琴：

 setInterval(function() { // Fade out the first element and fade in the next and then move the elements $('.fadein :first-child').fadeOut(1000, function() { $(this).next('img').fadeIn(1000) $(".fadein").append($(this).clone()); $(this).remove(); }); }, 1000);

Answer 3

尝试使用hide()在$('.fadein :first-child').hide()而不是fadeOut(); DEMO

淡入和淡出图像使内联块样式div混乱

问题描述

3 个解决方案

解决方案1
2 已采纳 2014-09-29 15:55:21

解决方案2
0 2014-09-29 15:49:17

解决方案3
0 2014-09-30 10:41:09

淡入和淡出图像使内联块样式div混乱

问题描述

3 个解决方案

解决方案1 2 已采纳 2014-09-29 15:55:21

解决方案2 0 2014-09-29 15:49:17

解决方案3 0 2014-09-30 10:41:09

解决方案1
2 已采纳 2014-09-29 15:55:21

解决方案2
0 2014-09-29 15:49:17

解决方案3
0 2014-09-30 10:41:09