/ Published in: jQuery
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
/* Author: Verve! Community Builders */ $(document).ready(function (){ var prevNav; var prevId; if ($('#servicesContent').length) { function servicesSelect($id, $prevId, $navId, $prevNavId) { // Debug alert(prevNav+" : "+prevId); $("#"+$prevNavId).css("background-image", "url(/images/services/"+$prevNavId+"_off.png)"); $("#"+$navId).css("background-image", "url(/images/services/"+$navId+"_on.png)"); $($prevId).fadeOut('slow', function(){ $($id).fadeIn('slow'); }); $($prevId+"Head").fadeOut('slow', function(){ $($id+"Head").fadeIn('slow', function() { }); }); } if(prevNav == undefined){ servicesSelect('#servicesContent1', '#servicesContent1', 'strategyLink', 'strategyLink'); prevNav = 'strategyLink'; prevId = '#servicesContent1'; } $('.serviceClick').click(function (e) { e.preventDefault(); servicesSelect($(this).attr('href'), prevId, $(this).attr('id'), prevNav); prevId = $(this).attr('href'); prevNav = $(this).attr('id'); }); });
URL: http://vervecb.com/services