An ok post – but please find someone to proofread before you post. It would be much more easily followed if thoughts flowed from one subject to the other easily, subjects and objects of sentences were obvious and words were not overused in the same sentence and spelled correctly. Your otherwise good points were quite difficult for me to ferret out.
So, my information about jQuery was correct and useful, but it had many English errors, causing readability issues?
It was proofread. I must go speak with that proofreader. He has always served me well on my long essays, maybe this is over his head.
If you don’t mind, would you point out some of the issues, because I would love to revise it to make it more clear for others. I would like to say that for some reason, many linebreaks were randomly added, and in some cases removed, which for me is severely affecting readability. Also, some code snippets were not properly encoded.
@justinrains I agree, but that is browser specific and not jQuery.
- Author had a File in an Envato Bundle
- Author had a Free File of the Month
- Author has had an Item Featured
- Author was Featured
- Beta Tester
- Bought between 1 and 9 items
- Contributed a Tutorial to a Tuts+ Site
- Has been a member for 5-6 years
Great article! And I had to chuckle at your bio, which describes me almost perfectly: I’m on Windows 7, prefer Notepad++, and studying hard for several courses!
I really like point #6, I didn’t know about that one… what a time saver!
Done once, and it’s just there for everything you need, love it
While articles like this one are useful for presenting what we should know, books like McFarland’s get us there painlessly! Definitely worth adding to your library.
Hello! I wanted to say thanks for writing an informative and useful article. I’ve shown that $(window).load trick to people before when they needed to wait for an image load.
I wanted to give some feedback though, to make a point a little more specifically correct. It’s a nit-pick, I suppose, but something worth noting.
In point four, talking about animations, it’s written “Notice how on line 21, I didn’t add .stop(), if I did, when the mouse would leave the link, it wouldn’t animate and it would just stick part of the way out.” That’s not entirely correct, I don’t believe, and my testing bears out my thinking so far.
In this example, the left padding is being adjusted, but in absolute ways. It’s being set to 24px and 12px specifically. Therefore, stopping the animation and animating back to one of those absolute positions is okay. I was unable to create this hanging issue with using absolute values.
A problem could occur in this case if one were using relative positions (setting it to +=12px or -=12px, which are legit options in jQuery for animation). If you had an example with it just hanging there when using .stop and absolute values for animating, I’d like to see it, since I can’t duplicate it.
Also, it looks like you’re disabling queuing of the animation. I suspect that the lack of queuing is what makes this code work without the stop, but it means that technically without the stop, the animation is working both directions during the overlapping milliseconds but because the animating to the left was the latter one, it’s the one that applies. It seems like it’d be a bit simpler in the code to use .stop rather than disabling queuing and such, and it does work well that way in my testing.
It’s a great article—I just am curious as to the reasoning behind adding in extra options and such, when the code doesn’t necessarily need them and it seems like it could be simplified a bit.
@brainarn I have experienced the problem with the relative animations hanging also, and this article didn’t really cover that. It covered a build-up of animation experienced when the queue is followed (demo here: http://themeforest.s3.amazonaws.com/128_jquery/demo/demo_1.html ). The only way I have gotten around the relative animations hanging is finding the original left padding, and then on the animation back, use that absolute reference. It doesn’t really solve the problem, but it works and isn’t that hard to do.
I see what you are talking about on line 21. I had some good reason for that when I wrote this 5 weeks ago, but I can’t remember what that was.
Using .stop on both sides seems to handle it okay though, without worrying about the queue, it seems. I just can’t seem to duplicate any hanging issue.
IMO , “It doesn’t really solve the problem, but it works” is an okay solution on occasion when you’re working on something internal, but seems like a bad thing to present in a tutorial. It’s teaching people “Just do this and it works” without any rationale.
I mean, it does work, and one of the beautiful things about jQuery is that it lets you approach things in a different way—just seems like it could have used a bit more reasoning for things.
I completely agree, but unfortunately I wrote this so long ago, all I can imagine is that I changed two things and once and assumed that was the fix to whatever problem I was having.
One could write a whole tutorial on an in depth explanation of the finer workings of the animation method in jQuery, and I didn’t feel it was the time, the place and I didn’t really have much space because I didn’t want the tutorial to be too long.
Good article. I remember to have learned a lot from this article too: