Grow your CSS skills. Land your dream job.

Jquery – Toggle & Fade (noob here)

  • # January 20, 2011 at 11:11 pm

    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

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

    # January 20, 2011 at 11:29 pm

    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

    # January 21, 2011 at 2:28 pm

    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

    # January 21, 2011 at 2:29 pm

    Hi noahgelman,

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

    – Steph

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".