How to apply HTML User Interface Effects using jQuery.

jquery-logojQuery is a small and wonderful JavaScript library that I use extensively in my work. I thought to write a tutorial about achieving UI Effects through jQuery. In this post, I explained how to do fade in/fade out effect using jQuery. This time let us see all the tricks that we can do to manipulate HTML using jQuery.

Fade In/Fade Out Effect using jQuery

Refer to this post to know more about Fade In/Fade Out effect in jQuery.

Hide/Show and Toggle HTML component/DIV/SPAN using jQuery

Today most of the web pages have sections which has a hide/show icon that toggle the visibility of that section. Also sometimes you may want to hide/show specific html component like button, textbox etc or div/span on some events. This can be easily achieved through jQuery.

Suppose we have a textbox and a button and we need to hide the textbox on click of the button. Following is the code snippet to do this.

<input type="text" name="username" id="user"/>
<input type="button" onClick="$('#user').hide()" value="Hide Textbox"/>

In above snippet we are selecting the textbox using its id #user and then calling hide() function to hide it. Simple isn’t it?

Similarly to show any component we can use following code:

$("#someid").show();

Also, not only you can hide/show any html component but also you can specify speed and also a callback function that gets called once the content is hidden or shown.

Following is the syntax of hide() and show() methods with speed:

hide(speed) and show(speed)
E.g.:
$("input").hide("slow");

$("p").show("normal");

speed can be “slow”, “normal” and “fast”. You can also provide number as an argument which represents milliseconds.

$(“.someclass”).hide(2000);

Also you can specify a handler function that gets called once the animation is completed.

$("#id").show("slow", function() {
      alert("done");
});

Also, you may want to implement a toggle functionality where a button click event can trigger toggle effect on some div or table.

<table id="tableId">
<tr><td> This is demo </td></tr>
</table>

<input type="button" value="Toggle Table" onClick="$("#tableId").toggle();" />

Slide Up/Slide Down using jQuery

This is a simple effect that slides down or up a container. Just you need to call slideUp() or slideDown() functions.

$("#divId").slideUp();
$("table").slideDown("slow");
$("div").slideUp(1000);

Similar to hide()/show() slideDown()/slideUp() can also be called with arguments to adjust the speed of sliding and optionally a call back function can be called.

$("span").slideDown("slow", function() {
      alert("Slide Done");
});

Also you can use slideToggle() function to achieve toggle functionality to do sliding up and down. slideToggle() also comes with the same arguments as slideDown/slideUp.

$("div#specialDiv").slideToggle("fast");

Animate html component using jQuery

jQuery provides an animate() function that can be used create your own custom animations.

animate(params, speed, easing, callback);

The key aspect of this function is the object of style properties that will be animated, and to what end. Each key within the object represents a style property that will also be animated (for example: “height”, “top”, or “opacity”).

The value associated with the key represents to what end the property will be animated. If a number is provided as the value, then the style property will be transitioned from its current state to that new number. Oterwise if the string “hide”, “show”, or “toggle” is provided, a default animation will be constructed for that property.

params (Hash): A set of style attributes that you wish to animate, and to what end.
speed (String|Number): (optional) A string representing one of the three predefined speeds (“slow”, “normal”, or “fast”) or the number of milliseconds to run the animation (e.g. 1000).
easing (String): (optional) The name of the easing effect that you want to use (Plugin Required).
callback (Function): (optional) A function to be executed whenever the animation completes.

$("p").animate({
  height: 'toggle', opacity: 'toggle'
}, "slow");

$("p").animate({
  left: 50, opacity: 'show'
}, 500);

An example of using an ‘easing’ function to provide a different style of animation. This will only work if you have a plugin that provides this easing function (Only ‘linear’ is provided by default, with jQuery).

$("p").animate({
  opacity: 'show'
}, "slow", "easein");

Thus you can leverage jQuery to create a good UI experience on your webpage. Also let me know if you using your own custom built plugins to achieve more UI effects.



8 Comments

  • vidhya 6 May, 2009, 15:20

    How to use style tag inside the struts tag… We are implementing the UI-slider control using struts… Here we have to hide the list box and show the slider..

    Months From Today
    <strong>Length of Term</strong>

    <!–

    style=”position:absolute;left:-999em;top:-999em;”>
    24
    36
    48
    60
    72
    84

    –>

  • Viral Patel 6 May, 2009, 17:10

    Hi Vidhya,
    If you want to apply style attribute in any of the struts tags, you shall use styleClass and apply CSS styles using that. You may not directly apply style attribute.
    <html:checkbox styleClass=”customClass” />

  • Katharine 21 May, 2009, 2:23

    Your site and you will reach the big successes, thank, it was interesting.
    I am from Dominican and also am speaking English, please tell me right I wrote the following sentence: “Apr white papers, case studies, business articles, and blog posts relating to turbotax case.”

    With love :-(, Katharine.

  • indialike 16 December, 2009, 12:43

    Very nice and useful tutorials to web designers,
    Thanks for posting.

  • Demetrius McClain 27 May, 2010, 20:40

    This is exactly what I need. However, I’ve been trying to make the information slide up and not down which seems to be the default. I see that you said it is possible but I don’t know exactly how to accomplish this. My attempt to alter the code generated unwanted results, interesting but unwanted.

  • zomgwtfbbq 29 April, 2011, 20:17

    I love jQuery, it’s a nice summary above, but tbh you could have added some demos like in the jQuery manual or on w3schools.

  • Nicky 30 September, 2013, 11:19

    Hi Viral,

    I have use ” then to give an error like ‘JavaScript runtime error: The value of the property ‘$’ is null or undefined, not a Function object’

    please give me suggestion to how to resolve it..

    Thnaking You

  • developer 8 October, 2013, 10:09

    hi ,
    can u give sample code to shift values between two tables using slider..

Leave a Reply

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

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current ye@r *