JQuery: Some Cool & Funky jQuery Examples

Posted 4 months, 3 weeks ago at 8:40 pm. 2 comments

I thought I would show you some cool examples of what can be done with jQuery other than AJAX connectivity. It also seems that a few people are confused on how to replace the content of a HTML element so I thought I would explain that too.

Replacing Content Of A Span

It’s fairly simple to do with jQuery all you have to do is this:

1

$('#idhere').html('content to replace with');

You could use this in a function and have the content added dynamically or just as it’s written. You can also change the id for any CSS compatible selector, even CSS 3. Here is a quick example of how it looks.


Click here to replace the content.

Color Effects

Using a small jQuery plugin you can animate colors too. You can get the plugin from jQuery plugins site. Just link it to the page just like you do with jQuery. To try it out use the animate function. Something like this should do the trick:

1

$('animationElement').animate({backgroundColor: "red"}, 3000);

Here is a quick example:

Using Preset Animations

You can also use some animations that are built into jQuery. These built in animations are ones that are used often and offer a convenient way of creating complicate animations by stringing the preset animations into custom ones build with the animate function. To see a full list of the pre-built animation functions try the jQuery documentation site. Here is an example of how one would look:

1

$('animationElement').slideUp("slow");

This would run the slide up animation and complete it within 600 milliseconds, that’s just over half a second. Here is a example you can try:

That’s pretty much it. These are just simple examples but they show the diversity & power jQuery can give you while keeping the javascript from getting too complicated for the general user. Even still it has the power needed by the advanced user and can produce some exceptional effects when used properly.

If you need to reset the examples above click here

Again any questions just leave a comment and I’ll get back to you ASAP.