用jQuery逐渐淡入列表项
|
我正在构建一个投资组合页面，其中包含不同项目的列表（在无序列表中）。在页面加载时，我希望每个\“ li \”逐渐淡入。我已经做到了这样：
var eT = 0;
$(\'.everything\').hide().each(function() {
$(this).delay(eT).fadeIn(\'slow\');
eT += 200;
});
没有找到相关结果
已邀请:
3 个回复
博沮富教全
<html> <head> <script src=\"./jquery-ui-1.8.7.custom/js/jquery-1.4.4.min.js\" type=\"text/javascript\"></script> <script type=\"text/javascript\"> $(document).ready(function() { var timeOuts = new Array(); var eT=200; function myFadeIn(jqObj) { jqObj.fadeIn(\'slow\'); } function clearAllTimeouts() { for (key in timeOuts) { clearTimeout(timeOuts[key]); } } $(\'.everything\').hide().each(function(index) { timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this)); }); $(\'#something\').click(function() { clearAllTimeouts(); $(\'.everything\').stop(true,true).hide(); $(\'.something\').each(function(index) { timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this)); }); }); }); </script> <style type=\"text/css\"> li.everything {width:40px;height:40px;background:#bbb;display:inline-block} li.something {width:80px;height:80px;background:#000;display:inline-block} </style> </head> <body> <button id=\"something\">BLACK</button> <ul> <li class=\"everything\"></li> <li class=\"everything something\"></li> <li class=\"everything\"></li> <li class=\"everything something\"></li> <li class=\"everything\"></li> <li class=\"everything something\"></li> <li class=\"everything\"></li> <li class=\"everything something\"></li> <li class=\"everything\"></li> <li class=\"everything something\"></li> </ul> </body> </html>钨蜡唤喉晤
<html> <head> <script src=\"/js/jquery-1.4.4.min.js\" type=\"text/javascript\"></script> <script type=\"text/javascript\"> $(document).ready(function() { var eT=0; $(\'.everything\').hide().each(function() { $(this).delay(eT).fadeIn(\'slow\'); eT += 200; }); $(\'.everything\').click(function() { $(\'.everything\').stop(true,true).fadeIn(); }); }); </script> <style type=\"text/css\"> li.everything {width:40px;height:40px;background:#bbb;display:inline-block} </style> </head> <body> <ul> <li class=\"everything\"></li> <li class=\"everything\"></li> <li class=\"everything\"></li> <li class=\"everything\"></li> <li class=\"everything\"></li> </ul> </body> </html>填盖
var eT = 0; $(\'.everything\').hide().each(function(index) { $(this).delay(eT*index).fadeIn(\'slow\'); eT += 200; });