Posted By

chrislorenz on 11/02/10


Tagged

div jquery fader more one than


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

Tyster
dubogii


jQuery Content Fader


 / Published in: jQuery
 

URL: http://vervecb.com/services

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/

  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. });

Report this snippet  

You need to login to post a comment.