[jQuery] Re: refactoring help/ suggestions?

[Karl Swedberg]

On Aug 11, 2009, at 3:31 AM, Ricardo wrote:

if (par.is(":hidden"))
     par.fadeIn("slow");
else
    par.fadeOut("sloe");

can be replaced with

par.toggle('slow');

:]

While that's true, .toggle('slow') does more than just fade in and  
out. It animates the width and the height as well.

Calvin,

Here is one other way to make it more "DRY" (untested), assuming I  
understand correctly what you're trying to achieve:

jQuery.fn.swapFade = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

$(document).ready(function() {
  $('p.a, p.b, p.c').hide();
  var hash = {'one': 'a', 'two': 'b', 'three': 'c'}


  $('.one, .two, .three').hover(function() {
    $('a.' + this.className).fadeOut('slow').fadeIn('slow');
    $('p.' + hash[this.className]).swapFade();

    return false;
  });
});


--Karl

____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Aug 10, 8:33 pm, Jules <jwira...@gmail.com> wrote:
Assuming your html format as follows:

    <a href="#" class="p">Para a</a>
    <p>Paragraph a</p>
    <br />
    <a href="#" class="p">Para b</a>
    <p>Paragraph b</p>
    <br />
    <a href="#" class="p">Para c</a>
    <p>Paragraph c</p>

Use this:
        $(document).ready(function() {
            $("a.p").next("p").hide();

            $("a.p").hover(function() {
                $(this).fadeOut("slow").fadeIn("slow");
                var par = $(this).next("p");

                if (par.is(":hidden"))
                    par.fadeIn("slow");
                else
                    par.fadeOut("sloe");
            });
        });

On Aug 11, 3:52 am, Calvin <cstephe...@gmail.com> wrote:

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;

});
});