My recommend programing workflow when programing jQuery’s animate function

I didn’t realize just how powerful jQuery’s animate function is. In fact I can almost bet that functions like "slideDown()” actually use it in the background. The one things about animate is that when you start using it the code can become much more complex then one would like. Personally I recommend using Netbeans IDE as I find it to be the best editor for most web programming. (PS – It’s FREE!!!!)

One thing I have found that helps me is I build out the shell of what I want to do and then fill in the details later. While this might seem like a waste of time or slower I find with the auto complete in Netbeans that I spend much less time later troubleshooting things when I make a mistake typing.

The first thing I do with animate is start with the basic by programming out the shell of the code.

First hit “$” and then “(“. Netbeans will automatically fill in the “)”. Great!. Now hit ‘ and a second ‘ will be entered automatically for you in Netbeans. Keep typing. Enter your jQuery Selector which is normally the DOM element that you want to select. Hit the “right arrow twice and hit the “.” key. Great you are on your way.

You should have something that looks like this:

You really want to see this drop down box as it will save you a lot of time. You can either manually go through it or keep typing to narrow your results. In our case we are wanting to use animate. Let’s type animate and see what happens.

As you can see I’ve only typed “ani” and Netbeans is smart enough to grab the functions from the jQuery file. Just hit enter and Netbeans will start to build out the template for you. You will see something like this:

Netbeans is smart enough to tell you were the parameters go and where the option go. At this time I recommend just typing “{“ in both the params section as well as the options section. When you hit “{“ the right “}” will automatically be entered. After entering the “{“ just hit enter to move on to the “options section”. Hit “{“ and again the second “}” will auto complete. Hit Enter and the cursor will automatically move to the end of the line. Hit “;” and you are now done making the shell of the animate function. It should look like this:

Now some people might not agree with this next step. WHEN programing I like making my code easy to read even if it means that the file that the code is in is larger! When I am done everything I normally run a minifier on all my code that goes up to the server.

Let’s make the code more readable. Doesn’t this look more like something you see in other languages?

Let’s go and enter the code that will actually do something.

In the above code example notice how I entered what I want the animate to do. jQuery is VERY tied to CSS. If you don’t know CSS then you should really become a CSS Ninja before heading in jQuery. One thing to note on line 3. If the CSS element has “-“ in it you should use camelCase. If you aren’t sure what that is search my site for “camelCase”. Notice on line 3 that there is NO trailing “;”. With so much of jQuery requiring a trailing “;” I like to point that out since I find I get in such a habit of close everything off. If we needed to do a second animation we would hover end the line with a “’,”. You will see in the next section called “options”.

In the above code example I have added two options to the command. I have put them on separate lines for easy reading and put a “,” at the end of the duration. This code is now very easy to read, the chances for error has gone down dramatically which means you have more time to code.

I mentioned about minifying the code so once that is done it might look more like this: