Scriptaculous is a great framework to implement superb animated effects for your website. It's simple to use and in general final result is awesome.
This tutorial explains how to use Scriptaculous to implement a nice "change opacity" effect for a layer and its content.
Download this tutorial (include Scriptaculous 1.8.1)
Step 1: include scriptaculous libraries
Create a new page index.html and addadd a link to prototype.js and scriptaculous.js in the <head> tag of your page:
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
Step 2: HTML code
This is an example about how to use opacity change effect. You have a container layer with ID el1, a chechkbox and some content like the following:
<div id="el1">
<img src="pic-user/u1.jpg" align="left" style="margin-right:10px;"/>
<span class="check"><input type="checkbox" id="status1" value="0" onClick="javascript:changeOpacity(1)"></span>
<span class="title">Database: design Entity-Relationship model</span>
<span class="desc">Complete the document with functional analysis</span>
</div>
When you click on the checkbox, if the checkbox was "not checked" you call a function (changeOpacity()) to set the layer opacity to 30%. If the chechbox was "checked", the function set the layer opacity from 30% to 100%. You can add new similar layers using a progressive numeration for ID (el2, el3, el4...). In this case remember to change the parameter in input in changeOpacity() function for each layer (changeOpacity(2), changeOpacity(3), changeOpacity(4)...).
Step 3: JavaScript function changeOpacity
Now, add this simple function into the <head> tag of your page to enable change opacity effect:
<script type="text/javascript">
function changeOpacity(id){
$opacityStatus = $('status'+id);
if($opacityStatus.value==0){
new Effect.Opacity('el'+id, {duration:0.5, from:1.0, to:0.3});
$opacityStatus.value = 1;
} else {
new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:0.1});
$opacityStatus.value= 0;
}
}
</script>
function changeOpacity(id){
$opacityStatus = $('status'+id);
if($opacityStatus.value==0){
new Effect.Opacity('el'+id, {duration:0.5, from:1.0, to:0.3});
$opacityStatus.value = 1;
} else {
new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:0.1});
$opacityStatus.value= 0;
}
}
</script>
It's all! Download this tutorial and try it!
Download this tutorial (include Scriptaculous 1.8.1)
I am 
This is just brilliant to implement to make it look like the Digg login bar opacity effect.
I'm so glad you took your ads off at the top left of your blog. Keep up the good work!
Hei Antonio!
Great post!
Can you show me how to make a menu look like SF.net (sourceforge.net)?
Sorry for my bad english!
cool! super easy to use. thanks
new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:0.1});
$opacityStatus.value= 0;
}
should be
new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:1});
$opacityStatus.value= 0;
}
cheers :)
Using the checkbox value to trigger the if..else conditionals is impractical, since a lot of developers use the value attribute to pass something to a script.
Here's my revised code and it works just as well:
function changeOpacity(id){
$opacityStatus = $('status'+id);
if($opacityStatus.checked){
new Effect.Opacity('el'+id, {duration:0.5, from:1.0, to:0.3});
} else {
new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:1});
}
}
nice example.......and explanation.......