Jquery – Toggle & Fade (noob here)

[StephBertha]

Hi there,

I just started learning jQuery yesterday and have been, for the past 5 hours, trying to work on a script that is about 90% there. It’s the last 10% that’s kicking me in the butt.

I have the jQuery library script added as well as User Interface Library (didn’t know if I needed that). And this after those calls:

$(function() {

$('div#whois-question a').click(function() {

$('p#who-is').toggle(400, "swing");

$(this).animate({ left: "590" }, 500);

$(this).toggleClass("active"); // remove toggle-open.png

});

});

You can see this in action here: Your text to link…

What it does is:
1. On click, the “?” button animates to the right.
2. The “?” button swaps out the background to an “x”
3. Paragraph text fades in.
4. You click on the “x”.
5. Paragraph text fades out.
6. The “x” turns back to a “y”, but it doesn’t go back to the original position! :(

Grrr… any thoughts? Very appreciated :)

– Steph

[noahgelman]

You tell it to $(this).animate({ left: “590” }, 500); but you never tell it to move back.

[Vinnix]

Without thinking too much of this, after including the .active to the item, you should have a
if($(this).hasClass(“active”))
{
//Reset animations back to default setting
}

inside your click event.

Hopefully that is helpful.

-Vinny

[StephBertha]

Hi Vinnix,

Thank you for responding!

I did try that and it didn’t work. I got lucky and found someone else’s script that does the job:

$(function()

{

$('div#whois-question a').toggle(

function()

{

$('div#whois-question a').animate({

left: "590px"

}, 500);

},

function()

{

$('div#whois-question a').animate({

left: "0"

}, 500);

});

$('div#whois-question a').click(function() {

$('p#who-is').toggle(400, "swing");

$(this).toggleClass("active");

})

});

What I don’t understand is, why did they add function() before the animate? I originally tried this with toggle, but didn’t work:

$(function() {

$('div#whois-question a').toggle {

$('div#whois-question a').animate({ left: "590px" }, 500);

},

function() {

$('div#whois-question a').animate({ left: "0" }, 500);

});

});

Is there a reason you need a function before each animate?

– Steph

[StephBertha]

Hi noahgelman,

Yeah, that’s what the problem was, I didn’t know how to move it back lol… :)

– Steph

[Author]

Posts