我想一个接一个地淡出水平对齐的几个方框。
假设每个盒子都属于 fadeable 类并且有一个 id。
另外，我想从外到内淡入淡出框。例如:
_ _ _ _ _ _ _ _ _
+_ _ _ _ _ _ _ _
+_ _ _ _ _ _ _ +
+ + _ _ _ _ _ _ +
+ + _ _ _ _ _ + +
+ + + _ _ _ _ + +
等等。 使用 jQuery 解决这个问题的最佳方法是什么？
这就是我现在所拥有的(大致)- 给每个盒子 div 一个自动递增的元数据 ID boxid 并执行以下操作:
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 - jquery中的多个淡入淡出动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1746141/