Home › Forums › JavaScript › Jquery – Toggle & Fade (noob here)
- This topic is empty.
-
AuthorPosts
-
January 20, 2011 at 11:11 pm #31335StephBerthaParticipant
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
January 20, 2011 at 11:14 pm #65046noahgelmanParticipantYou tell it to $(this).animate({ left: “590” }, 500); but you never tell it to move back.
January 20, 2011 at 11:29 pm #65042VinnixMemberWithout 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
January 21, 2011 at 2:28 pm #64791StephBerthaParticipantHi 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
January 21, 2011 at 2:29 pm #64814StephBerthaParticipantHi noahgelman,
Yeah, that’s what the problem was, I didn’t know how to move it back lol… :)
– Steph
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.