Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Programming / jQuery / My recommend programing workflow when programing jQuery’s animate function

Dec 16, 2010 By Jared Heinrichs 1 Comment

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:

image

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.

image

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:

image

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?

image

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

image

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

image

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:

image

Filed Under: jQuery Tagged With: How To

Comments

  1. Rafael Paranaíba says

    Dec 12, 2011 at 4:24 am

    Nice workflow!
    Ill try Netbeans, it looks beautiful!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2021 Winnipeg Web Design