treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Image consecutive fade in effect

  • Hello fella's,
    I would like to introduce myself! My name is Kair, I am from Almaty, Kazakhstan! I have been web designing for around 10 years, but nothing past html, just small simple pages with basic coding. Due to school and college, I haven't been practicing much. I came across this site today and it's great!
    Using this opportunity, can some one help me here? I can't find this script, must be ajax, which on page load starts fading in images or any content one after another. You can look at www.agarty.kz for the example when the links start to appear. Anyone know how to get this effect? Thanks in advance!
  • The jQuery fadeIn() function should be able to help. You'll need to use it with setTimeout() or pass a callback function to stagger the fades.
  • Here's a fiddle that might help: http://jsfiddle.net/Zrzhp/
  • Here's a nice sequential fade in for divs, so it would need to be reworked slightly for image fade-ins:

    http://jsfiddle.net/RExZs/1/

    It's a nice, smooth one.
  • hey those are great! thanks a lot!
  • Thanks, @GMB, I forgot about the delay() function. Here's a revised version of my fiddle that's leaner on the JavaScript:

    http://jsfiddle.net/xGCYa/