Grow your CSS skills. Land your dream job.

Trouble with JQuery

  • # June 13, 2012 at 6:45 pm

    Hi!
    I am new to this forum and hope to pass a very nice time.
    I have trouble with JQuery as i don’t understand it pretty well.
    A lot of functions as i think of doing things, don’t happen.
    Is there a good book to learn JQuery?
    I was reading JavaScript and JQuery: The missing manual, but that didn’t help.

    # June 13, 2012 at 7:34 pm

    Ow….that’s such a generic question. If something doesn’t work, there are a billion things that could be wrong (we wouldn’t be able to look into it and help out without a live example).

    First, check if the library is loaded and if your custom scripts are loaded. It can sometimes take lots of debugging, as well as trial and error.

    I personally think the “Missing Manual” books are pretty good and usually a good basis. Plenty of jQuery tutorials online (here’s a good starting point).

    Good luck!

    # June 13, 2012 at 8:59 pm

    Archives here, plus the book by the same name == awesome
    http://www.learningjquery.com/

    Or this

    http://tutsplus.com/course/30-days-to-learn-jquery/

    # June 14, 2012 at 1:37 am

    Sorry for the very generic post. Thank you for the responses!
    I want to give an example. When i try to use an animation example with hover it works

    $(document).ready(function() {
    $('#dashboard').hover(
    function() {
    $(this).stop().animate(
    {
    left: '0',
    backgroundColor: '#ffa'
    },
    500,
    'easeInSine'
    ); // end animate
    },
    function() {
    $(this).stop().animate(
    {
    left: '-92px',
    backgroundColor: 'rgb(110,138,195)'
    },
    600,
    'easeInSine'
    );
    });
    });

    But when i change the second line from .hover to .click it wont work:

    $(document).ready(function() {
    $('#dashboard').click(
    function() {
    $(this).stop().animate(
    {
    left: '0',
    backgroundColor: '#ffa'
    },
    500,
    'easeInSine'
    ); // end animate
    },
    function() {
    $(this).stop().animate(
    {
    left: '-92px',
    backgroundColor: 'rgb(110,138,195)'
    },
    600,
    'easeInSine'
    );
    });
    });

    Can you tell me why it wont work?

    # June 14, 2012 at 5:51 am

    With hover: http://jsfiddle.net/senff/2TbzF/
    With click: http://jsfiddle.net/senff/2TbzF/1/

    Both seem to do whatever they’re supposed to do. So it’s not really the jQuery that doesn’t work.

    However there is a difference between hover and click. With hover, there is also a “not-hover” state. So when the mouse is on the element, it does one thing (move to the 100px position), and then it does another thing only when you move the mouse away from it again (move to the -92px position).

    With click, it doesn’t exactly work like that; there isn’t really a “not-click” state in the same way that hover works. So, I believe that’s why the function that animates the element to -92px is triggered right away cause technically, the “not-click” state happens right when you stop clicking on it (letting go of the mouse button).

    Hope that helps.

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".