I’ve got to admit, everything is easier with jQuery. I don’t mean that as a marketing thing, I mean that as a “everything is friggin’ easier with jQuery” thing - and that’s that. You see online many websites that provide links to network sites, only these links are images, and these images have nice transitions when you rollover them from 50% opaque, to 100% opaque. Remove your cursor, and it transitions back to 50% opaque.
So how is that done? Well, I can’t answer for any of those guys, but I can tell you that it’s extremely easy to do this in jQuery with only a few lines of code.
Suppose you have the following list of images:
1
2
3
4
5
| <ul>
<li><img src="php.jpg" alt="PHP Is Awesome" /></li>
<li><img src="mysql.jpg" alt="MySQL Is Sexy" /></li>
<li><img src="jQuery.jpg" alt="jQuery Is Sooo Dreamy" /></li>
</ul> |
To start our opacification and instant sexification of our demonstration, we could add a class “opacify” to anything on the page we want to add this effect to. So our images now become something like this:
1
| <img src="filename.extension" alt="...message..." class="opacify" /> |
Next up, the jQuery code!
1
2
3
4
5
6
7
8
9
10
11
| $(document).ready(function () {
$(".opacify").fadeTo(1, 0.5);
$(".opacify").hover(
function () {
$(this).fadeTo("fast", 1);
},
function () {
$(this).fadeTo("normal", 0.5);
}
);
}); |
So what do we have here? Well, before we go through the code, you can simply copy and paste it to see it in effect. First though, you’ll need to get the latest release of the jQuery javascript file. You can find it online at http://docs.jquery.com/Downloading_jQuery#Download_jQuery - as I write this, the release is 1.2.6.
Download that, place a reference to it in your
tag, and you’ll be up and running.
Now, let’s actually look at the code - this won’t take long. The first thing you’ll notice is that I have my effect-code within another block:
1
2
3
| $(document).ready(function(){
// put your effect code here
}); |
This code basically checks to make sure the document (webpage) is ready, and once it is it runs the code that is in place of the comment. Simple, right? 
Now what is going on here:
1
| $(".opacify").fadeTo(1, 0.5); |
Basically we’re selecting all elements that have the classname of “opacify”, hence the CSS-ish request for “.opacify”. We’re then running the fadeTo() function on each of these matched elements, will will in 1 millisecond set their opacity to 0.5. The first argument here can also be a string if you like. You can say “slow”, “normal”, or “fast”.
Lastly, we have the following:
1
| $(".opacify").hover(<func1>,<func2>); |
Again we’re calling all elements with “opacify” as a classname, and we’re setting some functionality for the hover-event, when your mouse passes over the element. This hover() function takes two parameters. The first is a function that will run when your mouse enters the elements area, and the second parameter is the function that will be called when the mouse leaves the elements area.
So again, in the end we have the following:
1
2
3
4
5
6
7
8
9
10
11
| $(document).ready(function () {
$(".opacify").fadeTo(1, 0.5);
$(".opacify").hover(
function () {
$(this).fadeTo("fast", 1);
},
function () {
$(this).fadeTo("normal", 0.5);
}
);
}); |
General, Javascript, Programming, jQuery
Recent Comments