我想淡出几个水平对齐的盒子，一个接一个。假设每个盒子都属于类fadeable并且有一个 id。另外，我想将盒子从外面淡入淡出。例如：
_ _ _ _ _ _ _ _ _
+_ _ _ _ _ _ _ _
+_ _ _ _ _ _ _ +
+ + _ _ _ _ _ _ +
+ + _ _ _ _ _ + +
+ + + _ _ _ _ + +
等等。使用 jQuery 解决这个问题的最佳方法是什么？
这是我现在（大致）所拥有的 - 给每个盒子 div 一个自动递增的元数据 idboxid并执行以下操作：
max = $(".fadeable:last").attr('boxid');
for(i=0;i<max;i++)
{
$("[boxid=" + i + "]").fadeIn('fast');
$("[boxid=" + (max-i) + "]").fadeIn('fast');
}
有没有更好/更顺畅的方法来做到这一点？（使用动画，还是通过排队？）另外，在 CSS 中排列元素的最佳方式是什么？
谢谢！
玩这个：
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function createThem()
{
for(var id = 0; id < 15; id++)
{
var el = document.createElement('div');
$(el).attr('rel', id);
$(el).attr('class', 'fadeable');
$(el).css('opacity', '0.0');
$(el).css('display', 'inline');
$(el).css('background', 'green');
$(el).css('float', 'left');
$(el).css('margin-right', '5px');
$(el).text(id);
document.getElementById('container').appendChild(el);
}
}
function fadeThem()
{
var max = $(".fadeable:last").attr('rel');
var timer = 0;
var command = "";
for(i=0;i<max;i++)
{
command = "$('.fadeable[rel=" + i + "]').fadeTo('slow', 1.0);";
command += "$('.fadeable[rel=" + (max-i) + "]').fadeTo('slow', 1.0);";
window.setTimeout(command, timer);
timer += 1000;
}
}
</script>
</head>
<body>
<button onclick="createThem()" value="Create Them">Create Them</button>
<button onclick="fadeThem()" value="Fade Them">Fade Them</button>
<div id="container" style="background:blue;height:200px;width:300px">
<!--div rel="1" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">1</div>
<div rel="2" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">2</div>
<div rel="3" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">3</div>
<div rel="4" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">4</div>
<div rel="5" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">5</div>
<div rel="6" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">6</div>
<div rel="7" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">7</div>
<div rel="8" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">8</div>
<div rel="9" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">9</div>
<div rel="10" class="fadeable" style="opacity:0.0;display:inline;background:green;float:left;margin-right:5px;">10</div-->
</div>
</body>
</html>
好吧，看起来你的问题引发了很多研究！这是我想出的。我使它更像一个 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或者它们需要淡出和结束，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() }
});
});
根据您的原始代码，只需稍作调整：
max = $(".fadeable:last").attr('boxid');
for(i=0;i<max;i++)
{
$("[boxid=" + i + "]").fadeIn('fast', function(){
$("[boxid=" + (max-i) + "]").fadeIn('fast');
});
}
这可能不是您需要的确切行为，但想法是链接淡入淡出，以便下一个元素在最后一个元素完成之前不会开始动画。
这是通过fadeIn函数中的回调参数实现的
$(".fadeable").each(function() {
$(this).fadeIn('fast');
});