Trouble with JQuery

[GSquadron]

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.

[Senff]

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!

[Chris Coyier]

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/

[GSquadron]

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?

[Senff]

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.

[Author]

Posts