Advanced Search

jQuery - Applying Sequential Effects

/ Published in: jQuery
Save to your folder(s)
Dave Metvin\'s method. Two tricks to the method:\r\n\r\n$($boxes[div++] || []) - increaments \"div\" and passes an empty array if the element doesnt exist (so it exists).\r\n\r\narguments.callee - the name of the function currently being executed.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script type="text/javascript" src="../assets/js/jquery.js"></script>
  6.  
  7. <script type="text/javascript">
  8.  
  9. $(function () {
  10. 	var $boxes = $('.box').hide(),
  11.  
  12. 	div = 0;
  13.  
  14. 	$('#animate').click(function () {
  15. 		$($boxes[div++] || []).fadeIn('slow', arguments.callee);
  16. 	});
  17.  
  18. })
  19. </script>
  20. </head>
  21. <body>
  22. <style type="text/css">
  23. 	.box {width:50px;height:50px;display:block;background:red;margin:20px;border:1px solid #ccc;}
  24. </style>
  25. 	<a href="#" id="animate">Animate</a>
  26. 	<div class="box"></div>
  27. 	<div class="box"></div>
  28. 	<div class="box"></div>
  29. 	<div class="box"></div>
  30. 	<div class="box"></div>
  31. 	<div class="box"></div>
  32. 	<div class="box"></div>
  33. 	<div class="box"></div>
  34. 	<div class="box"></div>
  35. 	<div class="box"></div>
  36. </body>
  37. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.