0

私は本当にそれについて何も見つけていません。私が知っているのは、見栄えのする斜めのフェードプラグインだけです（ここを参照：http：//jonobr1.github.com/diagonalFade/）しかし、斜めにはしたくないので、左からのフェード効果だけが必要です。この「簡単なタスク」は、そのプラグインではカバーされていません。

プラグインはおそらく上にあり、小さなループを作成する方が簡単ですか？次のようなものです。200msで最初の行の不透明度を0から1にアニメートし、20秒の遅延を付けて、2番目の行にも同じことを行います。

私のマークアップは次のようになります。

<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 に答える