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

Reply via email to