SCRIPT.ACULO.US: Opacity

Here we go with another cool effect, ..and "outOfTheBox", which comes with scriptaculous is the opacity effect. How would u like to have a list of facebook style users and be able to check/uncheck them with a cool opacity effect??.

That's way too easy, ...not even in need of using the "famous" queues which I would recommen at any case but to make this example easier i will skip them.

As usual remember to enclose your Elements into a div, ..that it is always MANDATORY in script.aculo.us for not having unexpected results. Here we have an user entry:


<div class="vCard">
<div id="user1">
<img src="img/user1.jpg" align="left" style="margin-right:10px;"/>
<span class="check"><input type="checkbox" id="vcard1" value="0" onClick="javascript:changeOpacity(1)"></span>
<span class="title">Fuchs Thomas</span>
<span class="desc">Script.aculo.us Framework Founder. A Genius, The Ninja GURU!!</span>
</div>
</div>


Let's have three users entry, one of them is me!! :), and let's wrap them into a div. And now lets just apply the effect opacity to the entry selected:


new Effect.Opacity('user' id, {duration:0.5, from:1.0, to:0.3});


and you are done... Yes it is just this!!. Of course the facebook style is just a matter of styles. Here you have a link to the example