0

我真的没有找到任何关于它的东西。我所知道的只是一个对角淡入淡出插件，看起来不错（见这里：http: //jonobr1.github.com/diagonalFade/）但我不想要它对角线，我只想要从左边的淡入淡出效果，显然该插件未涵盖此“简单任务”。

插件是否可能超出顶部，并且只做一个小循环会更容易？类似于：在 200 毫秒内将第一行的不透明度设置为 0 到 1，延迟 20 秒，对第二行执行相同的操作，依此类推。

我的标记如下所示：

<div class="image_gallery">
  <div class="image_column">
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
  </div>
  <div class="image_column">
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
  </div>
  <div class="image_column">
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
  </div>
  <div class="image_column">
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
  </div>
</div>
4

1 回答 1

1

您可以使用 jQuery 的 .fadeTo() 函数来完成工作。

1）给每一列一个不同的id来识别它，像这样：

<div class="image_gallery">
  <div class="image_column" id="column_1">
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
  </div>
  <div class="image_column" id="column_2">
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
  </div>
  <div class="image_column" id="column_3">
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
  </div>
  <div class="image_column" id="column_4">
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
    <div class="image"><img src="#" alt="" /></div>
  </div>
</div>

2) 从不透明度为 0 的所有列开始。

3）在jQuery中创建一个处理动画的函数。这将在每一列上调用 .fadeTo(200, 1.0) ，其中 200 表示 200 毫秒的动画持续时间，1.0 表示目标不透明度，如下所示：

<script>
function fadePicturesIn(columnNum) {
  setTimeout(function() {
    $("#column_" + columnNum).fadeTo(200, 1.0);
    if (columnNum < 4) {
      fadePicturesIn(columnNum + 1);
    }
  }, 20000); // 20s delay
}
</script>

4）在页面加载（或任何你想触发动画的地方），调用函数。

<script>
$(document).ready(function() {
  fadePicturesIn(1);
});
</script>

或者

<script>
$("#myButton").click(function() {
  fadePicturesIn(1);
});
</script>

希望有帮助！

于 2013-03-26T14:02:02.800 回答