Here is a solution I came up with, but there is still some repeated code. Does anyone have any suggestions I could try out to 'DRY' up my code?
jQuery.fn.swapFade = function() { if (this.is(':hidden')) { this.fadeIn('slow'); } else { this.fadeOut('slow'); } }; $(document).ready(function() { $('p.a, p.b, p.c').hide(); var hash = {'one': 'a', 'two': 'b', 'three': 'c'} $('.one').hover(function() { $('a.one').fadeOut('slow').fadeIn('slow'); $('p.' + hash[this.className]).swapFade(); return false; }); $('.two').hover(function() { $('a.two').fadeOut('slow').fadeIn('slow'); $('p.' + hash[this.className]).swapFade(); return false; }); $('.three').hover(function() { $('a.three').fadeOut('slow').fadeIn('slow'); $('p.' + hash[this.className]).swapFade(); return false; }); }); On Aug 9, 11:51 am, Calvin <cstephe...@gmail.com> wrote: > Hi, > > I wrote this code for a simple "hide and show" effect and I am looking > for any advice or examples of how I can refactor the code. I tried > using a hash but it didn't work out right and I am thinking that maybe > I should make a object method. > > here is the code: > > $(document).ready(function() { > var $firstPara = $('p.a'); > $firstPara.hide(); > > $('a.one').hover(function() { > $('a.one').fadeOut('slow').fadeIn('slow'); > > if ($firstPara.is(':hidden')) { > $firstPara.fadeIn('slow'); > } else { > $firstPara.fadeOut('slow'); > } > return false; > > }); > }); > > $(document).ready(function() { > var $secondPara = $('p.b'); > $secondPara.hide(); > > $('a.two').hover(function() { > $('a.two').fadeOut('slow').fadeIn('slow'); > > if ($secondPara.is(':hidden')) { > $secondPara.fadeIn('slow'); > } else { > $secondPara.fadeOut('slow'); > } > return false; > > }); > }); > > $(document).ready(function() { > var $thirdPara = $('p.c'); > $thirdPara.hide(); > > $('a.three').hover(function() { > $('a.three').fadeOut('slow').fadeIn('slow'); > > if ($thirdPara.is(':hidden')) { > $thirdPara.fadeIn('slow'); > } else { > $thirdPara.fadeOut('slow'); > } > return false; > > > > }); > });