My Top 5 Favorite jQuery Functions

There are lots of fun and modern effects you can achieve on your website with just a couple of lines of jQuery. Below I have thrown together a list of my top five jQuery functions, which I use on a regular basis when creating websites.

  1. .slideDown() – The .slideDown() function is used for growing an element onto the screen. This can look neat on dropdown navigations or for sliding out popup forms. This is used in conjunction with the jQuery function .slideUp(), which slides the element back to hidden.

    In the example below, we make a div which isn't visable slide down so we can see the green square.

    The Code:

    <div id="element1" style="background-color: #3a9572; width: 100px; height: 100px; display:none"></div>
    <a onclick="$('#element1').slideDown();" href="javascript:;">Click here to use the function .slideDown().</a>
                
    Click here to use the function .slideDown().

  2. .fadeOut() – This jQuery function is used for hiding elements in a fading transitional effect. Examples of what I have previously used this function for are rotating banners and popups on websites. This is usually used with .fadeIn() which trasitions the element from hidden to visable.

    In the example below see how you can make the blue element disapear.

    The Code:

    <div id="element2" style="background-color: #3896c2; width: 100px; height: 100px;"></div>
    <a onclick="$('#element2').fadeOut();" href="javascript:;">Click here to use the function .fadeOut()</a>
                
    Click here to use the function .fadeOut()

  3. .html() – The .html() function is used for changing the innerHTML of a given element. Although this isn’t a flash animation as the two mentioned above, I find this is an extremely useful function which I use frequently. This is extremely handy when creating easily usable forms.

    In the example below you can change the dropdown options based on which radio button has been selected.

    The Code:

    Select Number Type:
    Odds
    <input
        onclick="jQuery('#element3').html('<option value=\'1\'>1</option><option value=\'3\'>3</option><option value=\'5\'>5</option>');"
        type="radio"
        name="numbers"
        value="odds"
        checked="checked"
    >
    Evens
    <input
        onclick="jQuery('#element3').html('<option value=\'2\'>2</option><option value=\'4\'>4</option><option value=\'6\'>6</option>');"
        type="radio"
        name="numbers"
        value="evens"
    >
    <select id="element3" name="test">
        <option value="1">1</option>
        <option value="3">3</option>
        <option value="5">5</option>
    </select>
                
    Select Number Type: Odds Evens

  4. .val() – This is once again a very practical jQuery function. The .val() function is used to determine the value of a form element. This can be very useful when using client side validation on your form, for a quicker and more user-friendly experience.

    In the example below we will be checking the value being typed into the textbox and print this value into our div using .html().

    The Code:

    Type Here: <input type="text" name="test2" value="" id="input1" onkeyup="$('#div4').html($(this).val())" />
    <div id="div4" style="border:1px solid #000;padding:3px;width:200px;"></div>
                
    Type Here:

  5. .animate() – My list finishes with my top favourite jQuery function .animate(). This function allows you to animate a change in CSS properties on an element. This is a fun effect with the potential to create lots of different quirky effects on your website.

    In the example below we change the div’s width, height and position with the animate function. We also change the speed of each of these animation with the speed parameter (which is measured in milliseconds).

    The Code:

    <div id="div1" style="width: 100px; height: 100px; background-color: green; color: #000;"></div>
    <a onclick="$('#div1').animate({ height: 150, width:10, marginLeft:100 },5000);$('#div1').animate({ height: 100, width:200, marginLeft:150 },1000);$('#div1').animate({ height: 20, width:100, marginLeft:200 },3000);" href="javascript:;">Click here to change the box</a>
                
    Click here to change the box

Related

Design & Development
And Now, How to Build the Perfect eCommerce Product Page
Design & Development
How to Build the Perfect eCommerce Product Category Page
Design & Development
How to setup a 301 Permanent Redirect
Design & Development
And Now, How to Build the Perfect eCommerce Product Page
Design & Development
How to Build the Perfect eCommerce Product Category Page
Design & Development
How to setup a 301 Permanent Redirect

Our thoughts

Let's collaborate • Let's collaborate • Let's collaborate • Let's collaborate • Let's collaborate • Let's collaborate • Let's collaborate • Let's collaborate • Let's collaborate • Let's collaborate • Let's collaborate

Like what you see?
Get in touch

"*" indicates required fields

Your personal information will only be used to service your enquiry. We will only contact you with relevant information. For further information view our full Privacy Policy.
This field is for validation purposes and should be left unchanged.

CONTACT

Hi, let's see how
we can help

"*" indicates required fields

Your personal information will only be used to service your enquiry. We will only contact you with relevant information. For further information view our full Privacy Policy.
This field is for validation purposes and should be left unchanged.

MENU

Looking for Apex Digital?

You’re in the right place, we’re now Limelight, the same people and same great work.