JQuery: Fade in imagecolumns from left

Question

I really haven't found anything about it. All I know about is a diagonal fade Plugin, which looks nice ( see here: http://jonobr1.github.com/diagonalFade/ ) But I don't want it diagonal, I want the fade effect only from the left and apparently this "easy task" is not covered within that Plugin.

Is a plugin maybe over the top and it'd be easier to just make a little loop? Something like: Animate opacity 0 to 1 for first row in 200ms, with a 20s delay, do the same for the second row and so on.

My markup looks like this:

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

have a look here http://stackoverflow.com/questions/596608/slide-right-to-left — Mike C., Mar 26 '13 at 13:35
@Mike C.: I don't want my content to slide though, just to fade in each row after each other. — user828591, Mar 26 '13 at 14:35

score 1 · Accepted Answer · answered Mar 26 '13 at 14:02

You could use jQuery's .fadeTo() function to get the job done.

1) Give each column a different id to identify it, like so:

<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) Start off all of your columns with an opacity of 0.

3) Create a function which handles the animation in jQuery. This will call .fadeTo(200, 1.0) on each column, where 200 represents a 200 ms animation duration, and 1.0 represents the target opacity, like so:

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

4) On page load (or whatever you want to trigger the animation), call the function.

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

or

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

Hope that helps!

Thanks man, that's exactly what I was looking for! I altered it a little but now it's perfectly working for my needs. — user828591, Mar 26 '13 at 14:34

JQuery: Fade in imagecolumns from left

1 Answers1