Fade in list of images, once all are loaded.

Posted by Nathan Barry on Stack Overflow See other posts from Stack Overflow or by Nathan Barry
Published on 2010-03-07T19:56:11Z Indexed on 2010/03/13 22:05 UTC
Read the original article Hit count: 237

Filed under:

jquery-ui

|

fade

|

images

I have a group of images in this format:

<ul id="photo-list">
  <li><img src="" /></li>
  <li><img src="" /></li>
  <li><img src="" /></li>
</ul>

My goal is that once all the images have finished loading, then #photo-list will fade in. Also I would like to display a loading animation before the images are loaded. Any help is appreciated!

© Stack Overflow or respective owner

Related posts about jquery-ui

jquery.ui.draggable.js and jquery.ui.widget.js conflict

as seen on Stack Overflow - Search for 'Stack Overflow'
hello I had a working application, which uses a jquery ui dialog. I wanted to make the dialog draggable. As far as I know the only thing needed is the jquery.ui.draggable.js script. So I added it to the scripts I am using, but know I get the following error (as shown in the firebug console): base… >>> More
Use JQuery UI Datepicker with Icons from Jquery UI Theme

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a datepicker control setup using the JQuery UI, I am also using the JQuery UI themes which provide a bunch of default icons that I want to use. The DatePicker allows for specifying a specific image, i.e.: <script type="text/javascript"> $(document).ready(function() { $("#DateFrom")… >>> More
JQuery UI function errors out: Object is not a property or method

as seen on Stack Overflow - Search for 'Stack Overflow'
In the following code I get an error that says autocomplete function Object is not a property or method Here is the code: <title><%= ViewData["pagetitle"] + " | " + config.Sitename.ToString() %></title> <script src="../../Scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/minified/jquery… >>> More
Strange jQueryUI dialog error

as seen on Stack Overflow - Search for 'Stack Overflow'
I have dialog created like this $('#add_error').click(function(e) { $('<div>') .load('/someaction/format/html/') .dialog({ title: 'Some title', modal: true, width: 385, close: function() { … >>> More
JavaScript : jQuery UI 1.8 est disponible avec 5 nouveaux plug-ins, 1 nouvel effet et des centaines

as seen on Developper.com - Search for 'Developper.com'
jQuery UI 1.8 est disponible L'équipe de jQuery UI annonce la sortie de jQuery UI 1.8, cette version apporte 5 nouveaux plug-ins, 1 nouvel effet, et des centaines de corrections de bogues et d'améliorations. Pour une liste complète de tous les changements entre jQuery UI 1.7.2 et jQuery UI 1… >>> More

Related posts about fade

UILabel fade-in fade-out question

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi there, I got the following code inside an NSTimer selector: [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:2.0]; [infoLbl setAlpha:0]; [UIView commitAnimations]; [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:2.0]; [infoLbl setAlpha:1]; [UIView… >>> More
Blending textures together, texture fade over / fade in

as seen on Game Development - Search for 'Game Development'
What is the best way to render a texture overlapping effect? Like in this example: I want either the grass to fade in to the snow texture, or the other way around. No rough edges. Somehow make them blend over. So the grass has a bit of snow or the snow has a bit of grass How is this possible during… >>> More
Fade Out an <ul> and Fade In Info From DB

as seen on Stack Overflow - Search for 'Stack Overflow'
On my portfolio page I have this setup: <div id="portfolio"> <ul id="sites"> <li> <h3><a href="#">MotorSomethin</a></h3> <img src="http://dummyimage.com/265x100/000/fff" /> <p> … >>> More
jquery li with image fade in background (fade in class)

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm currently using this code: var gallery = $('ul#gallery').children(); $(gallery).filter(':even').not(':last').hover(function () {$(this).toggleClass('next')}); I'm trying to make it fade this new class in. Currently, there's an <li> with an image in it, no background. When the 'next'… >>> More
Fading in/Fade out text in IE

as seen on Stack Overflow - Search for 'Stack Overflow'
I had a problem and whipped up a quick solution: fade-in and fade-out a series of quotations. My solution works just as I want it in every browser except any of the IEs. The only problem with the IEs is that the text does not fade in and fade out; the text simply pops into existence. I believe I've… >>> More