Ну, похоже, ваш вопрос вызвал много исследований! Вот что я придумал. Я сделал его больше в стиле плагина jQuery, так что из-за этого есть некоторый дополнительный код, но его можно легко использовать в вашем проекте. Кроме того, вы можете установить fadeIn на false, и он будет исчезать по той же схеме:
<!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>
Если элементы начинаются как display:none или им нужно fadeOut и заканчивают как display:none, тогда используйте следующую команду вместо этого для запуска плагина:
// 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() }
});
});