BLOG

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 type="radio" name="numbers" value="odds" checked="checked" onclick="$('element3').html('<option value=\"1\">1</option><option value=\"3\">3</option><option value=\"5\">5</option>');" />
   Evens <input type="radio" name="numbers" value="evens" onclick="$('element3').html('<option value=\"2\">2</option><option value=\"4\">4</option><option value=\"6\">6</option>');" />
   <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 1 3 5

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 class="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 to use the function .animate()

To see more of what jQuery can do visit www.jquery.com