jquery中的多个fadein动画
我想一个接一个地淡入几个水平排列的框中。 假设每个框属于类jquery中的多个fadein动画,jquery,css,jquery-animate,Jquery,Css,Jquery Animate,我想一个接一个地淡入几个水平排列的框中。 假设每个框属于类fadable，并且有一个id。 另外，我想从外到内淡出这些盒子。例如： _ _ _ _ _ _ _ _ _ +_ _ _ _ _ _ _ _ +_ _ _ _ _ _ _ + + + _ _ _ _ _ _ + + + _ _ _ _ _ + + + + + _ _ _ _ + + 等等。 使用jQuery解决这个问题的最佳方法是什么 下面是我现在（大致）得到的内容-给每个box div一个自动递增的元数据idboxid，并执行以下操
fadable_ _ _ _ _ _ _ _ _
+_ _ _ _ _ _ _ _
+_ _ _ _ _ _ _ +
+ + _ _ _ _ _ _ +
+ + _ _ _ _ _ + +
+ + + _ _ _ _ + +
boxidmax = $(".fadeable:last").attr('boxid');
for(i=0;i<max;i++)
{
$("[boxid=" + i + "]").fadeIn('fast');
$("[boxid=" + (max-i) + "]").fadeIn('fast');
}
max=$（“.fadable:last”）.attr（'boxid'）；
对于（i=0；i，请尝试一下：
<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>
函数createThemes（）
{
对于（变量id=0；id<15；id++）
{
var el=document.createElement（'div'）；
$（el）.attr（'rel'，id）；
$（el.attr（'class'，'fadable'）；
$（el.css（'opacity'，'0.0'）；
$（el.css（'display'，'inline'）；
$（el.css（'background'，'green'）；
$（el.css（'float'，'left'）；
$（el.css（'margin-right'，'5px'）；
$（el）.文本（id）；
document.getElementById（'container'）.appendChild（el）；
}
}
函数fadeThem（）
{
var max=$（“.fadable:last”）.attr（'rel'）；
var定时器=0；
var命令=”；
对于（i=0；i
玩一玩这个：
<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>
函数createThemes（）
{
对于（变量id=0；id<15；id++）
{
var el=document.createElement（'div'）；
$（el）.attr（'rel'，id）；
$（el.attr（'class'，'fadable'）；
$（el.css（'opacity'，'0.0'）；
$（el.css（'display'，'inline'）；
$（el.css（'background'，'green'）；
$（el.css（'float'，'left'）；
$（el.css（'margin-right'，'5px'）；
$（el）.文本（id）；
document.getElementById（'container'）.appendChild（el）；
}
}
函数fadeThem（）
{
var max=$（“.fadable:last”）.attr（'rel'）；
var定时器=0；
var命令=”；
对于（i=0；i
好吧，看起来你的问题引发了很多研究！以下是我的想法。我将它打造成了一种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>
好吧，看起来你的问题引发了很多研究！以下是我的想法。我将它打造成了一种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>
根据您的原始代码，只需做一个小的调整：
max = $(".fadeable:last").attr('boxid');
for(i=0;i<max;i++)
{
$("[boxid=" + i + "]").fadeIn('fast', function(){
$("[boxid=" + (max-i) + "]").fadeIn('fast');
});
}
max=$（“.fadable:last”）.attr（'boxid'）；
对于（i=0；i基于您的原始代码，只需进行一个小的调整：
max = $(".fadeable:last").attr('boxid');
for(i=0;i<max;i++)
{
$("[boxid=" + i + "]").fadeIn('fast', function(){
$("[boxid=" + (max-i) + "]").fadeIn('fast');
});
}
max=$（“.fadable:last”）.attr（'boxid'）；
对于（i=0；iNo，它将同时淡入，您必须添加延迟。不，它将同时淡入，您必须添加延迟。您可以删除CreateThems（）方法和按钮，并取消对容器中div的注释（如果您愿意的话），这样做没有什么区别，我只是玩了一下动态创建方法和按钮并取消对容器中的div的注释（如果您愿意的话），对您的操作方式没有任何影响，我只是玩了一下动态创建。仍然没有延迟。此外，循环没有考虑到他希望它从两端淡出。您的代码将几乎同时淡出所有元素，并运行一个额外的f fadeIn在末尾没有效果。你是对的，他希望使用某种形式的嵌套。仍然没有延迟。而且，循环没有考虑到他希望它从两端淡出。你的代码几乎同时淡出所有元素，并在末尾运行一组额外的fadeIn，没有效果。你是对的，他将我想使用某种形式的嵌套。