Lateral Code
A Web Design Blog Focused on Code and Technology
Currently Browsing: Home » 7 jQuery Examples
7 jQuery Examples
By Karthik Viswanathan
JavaScript is a scripting language used by many web designers for hover effects, image manipulation, dynamic CSS editing, form validation, text editing, and so much more.
JQuery is a very popular JavaScript library used throughout the web. In this article we will present 7 jQuery examples.
1. Toggling Elements
jQuery Code:
$("#example1").toggle();Demo:
- This element
- will be toggled
- if you click
- the link below.
2. Animated Toggling
We all love effects don’t we. Let’s animate!
$("#example2").toggle(1000);Did you know that you can show or hide this element? How about doing it in style? View this jQuery example in action below.
3. Sliding is always fancy.
$("#example3").slideToggle(1000);Who doesn’t like sliding? Use the link below for a demo!
4. Fade away!
if ( $("#example4").css("display") == "none" )
$("#example4").fadeIn(1000);
else
$("#example4").fadeOut(1000);Fade me please!
5. CSS Width/Height Change
How about dynamic width or height editing in minimal code?
if ( $("#example5").css("width") != "100px" )
$("#example5").width(100);
else
$("#example5").css( "width", "100%" );
Doesn’t this text look nice when it’s at the original width? Why don’t you squish it down a bit!
6. CSS Property Change
Time to get flexible!
if ( jQuery.data( $("#example6").get(0), "border" ) != "black" )
{
$("#example6").css("border", "1px solid black");
jQuery.data( $("#example6").get(0), "border", "black" );
}
else
{
$("#example6").css("border", "none");
jQuery.data( $("#example6").get(0), "border", "" );
}- Add a border to me please!
7. CSS Class Change
Why not change a whole set of properties by just adding in a class!
if ( $("#example7").attr("class") != "purple-box" )
$("#example7").addClass("purple-box");
else
$("#example7").removeClass("purple-box");My class is broken. I need a new one. Use this jQuery example to repair it!
That’s all for now! More to come soon.
Tags: javascript
This entry was posted on Monday, December 29th, 2008 at 23:34:51. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
One Response to “7 jQuery Examples”
Leave a Reply
Great list!
What do you think about this example article?
http://justcoded.com/article/jquery-examples/ – I think it’s very clearly to show effect directly with site elements!