Well, it looked like your question sparked a lot of research! Here is what I came up with. I made it more of a jQuery plugin style, so there is some extra code because of it, but it can be easily reused throughout your project. Additionally, you can set fadeIn to false and it will fade out in the same pattern:
<!DOCTYPE html >
<html>
<head>
<style type="text/css" media="screen">
#items { height:50px; text-align: center; line-height: 50px; }
#items div {
width: 50px; height: 50px;
float: left; position: relative;
background: red;
opacity: 0.0; -moz-opacity: 0.0; filter:alpha(opacity=0);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$.fn.fadeFromOutside = function(opts){
if(this.size() > 0){
var options = options = $.extend({}, $.fn.fadeFromOutside.defaults, opts),
size = this.size(),
steps = Math.ceil(size / 2), // Always round up
fade_in = options.fadeIn,
time = options.length,
wait = Math.floor(time / steps), // Delay between fades
items = this.css({opacity: (fade_in ? 0.0 : 1.0)}),
fade_to = (fade_in ? 1.0 : 0.0); // Decide what the final opacity should be.
// We are using a private internal function to handle
// the processing and delayed fadeIn.
var fade_action = function(one, two, count_left, delay){
/* If a callback is present, and this is the last iteration
then this sets it up to be called */
var callback = null;
if( options.complete && count_left == (steps - 1))
callback = options.complete;
/* Always animate 'one' */
$(one).animate({opacity: fade_to}, {duration: time, complete: callback});
/* Animate two if its not the same as one.
two will equal one on the last step of odd numbered sets */
if(one != two)
$(two).animate({opacity: fade_to}, time);
if(count_left < steps){
window.setTimeout(function(){
fade_action(
items.get(count_left),
items.get(size - 1 - count_left),
count_left + 1,
delay);
}, delay);
}
}
// Start the fade
fade_action(items.get(0), items.get(size - 1), 1, wait);
}
return this; // Don't break the chain
}
$.fn.fadeFromOutside.defaults = {
fadeIn: true,
length: 1000
}
/* DOM Ready */
$(function(){
$("#items > div").fadeFromOutside({
fadeIn: true, // Set to false to fade out
length: 2000, // Take two seconds
complete: function(){
alert('done!'); // Alert when finished
}
});
});
</script>
</head>
<body>
<div id="items">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
If the elements start as display:none or they need to fadeOut and end as display:none then use the following command instead to initiate the plugin:
// fadeIn: Assumes the div's start as display:none
$("#items > div")
.css({display: block, opacity: 0.0})
.fadeFromOutside();
// fadeOut: Will hide all divs at the end
$("#items > div")
.fadeFromOutside({
complete: function(){ $("#items > div").hide() }
});
});