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。

无论如何，这种结构都将第一个内联块元素保持为固定大小许多图像元素都保存在其中。

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

请参阅演示：http://jsfiddle.net/audetwebdesign/6wey831p/

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

Answer 2

我想你想要这样的东西Fiddle ..

单次运行：

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);

多次Fiddle：

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 个答案: