使用jQuery顺序显示元素
时间：2011-01-18 来源：.小贺
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> <style> li { float: left; list-style: none; margin: 0 25px 25px 0; } </style> </head> <body> <ul> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> <li><img src="http://d3pr5r64n04s3o.cloudfront.net/002_Tut_WarmDesign/title_image.jpg" /> </li> </ul> <p style="clear: both; display: none;"> <a href="#"> Show Images </a> </p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script> (function() { $('p').show(); var lis = $('li').hide(); $('a').click(function() { var i = 0; (function displayImages() { lis.eq(i++).fadeIn(200, displayImages); })(); }); })(); </script> </body> </html>
相关阅读 更多 +
