if (par.is(":hidden"))
par.fadeIn("slow");
else
par.fadeOut("sloe");
can be replaced with
par.toggle('slow');
:]
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;
>
> > > });
> > > });
