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