Advanced Search

jQuery Content Fader

/ Published in: jQuery
Save to your folder(s)
This is a simple little content fader I created using jQuery. It is very simple and not browser intensive. It utilizes callback functions on the fadeOut to execute the fadeIn of the next content block. To reference the HTML src that goes a long with it, visit here. http://snipplr.com/view/43415/jquery-content-fader-html-src/

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* Author: Verve! Community Builders */
  2.  
  3. $(document).ready(function (){
  4. 	var prevNav;
  5. 	var prevId;
  6.  
  7.  
  8. 	if ($('#servicesContent').length) {
  9.  
  10. 		function servicesSelect($id, $prevId, $navId, $prevNavId) {
  11. 			// Debug alert(prevNav+" : "+prevId);
  12. 			$("#"+$prevNavId).css("background-image", "url(/images/services/"+$prevNavId+"_off.png)");
  13. 			$("#"+$navId).css("background-image", "url(/images/services/"+$navId+"_on.png)");
  14. 			$($prevId).fadeOut('slow', function(){
  15. 				$($id).fadeIn('slow');
  16. 				});
  17. 			$($prevId+"Head").fadeOut('slow', function(){
  18. 				$($id+"Head").fadeIn('slow', function() {
  19. 					});
  20. 				});
  21.  
  22. 		}
  23.  
  24.  
  25. 		if(prevNav == undefined){
  26. 			servicesSelect('#servicesContent1', '#servicesContent1', 'strategyLink', 'strategyLink');
  27. 			prevNav = 'strategyLink';
  28. 			prevId = '#servicesContent1';
  29. 		}
  30.  
  31. 		$('.serviceClick').click(function (e) {
  32. 			e.preventDefault();
  33. 			servicesSelect($(this).attr('href'), prevId, $(this).attr('id'), prevNav);
  34. 			prevId = $(this).attr('href');
  35. 			prevNav = $(this).attr('id');
  36. 		});
  37. });

URL: http://vervecb.com/services

Report this snippet


Comments

You need to login to view comments.