Opacity and Scale

Here's a sample built using Glimmer that changes the opacity of one or more items by using CSS selectors, in one case using CSS IDs (#mushroom_1) and in another a CSS Class (.mushroom).

Roll over the plane to change opacity and position.

HTML

<div id="fadeContainer">
<ul>
<li id="fadeOneTrigger"><a>Fade One</a></li>
<li id="fadeBothTrigger"><a>Fade Both</a></li>
<li id="unFadeTrigger"><a>Unfade</a></li>
</ul>
<div id="mushroom_2" class="mushroom"><img id="blue" src="images/mushroomGuy_blue.png" /></div>
<div id="mushroom_1" class="mushroom"><img id="plane" src="images/mushroomGuyPlane.png" /></div>
</div>

CSS

#fadeContainer
{
height:260px;
}
#fadeContainer .mushroom
{
display:inline;
}

#fadeContainer ul
{
padding:0 0 30px 0;
margin:0;
}

#fadeContainer li
{
display:inline;
margin-right:20px;
}

#fadeContainer a
{
cursor:hand;
}

#mushroom_1
{
position:absolute;
margin-left:300px;
}

#mushroom_2
{
position:absolute;
}

jQuery

jQuery(function($) {
var timer;
function fadeOne(event)
{
$("#mushroom_1").animate({"opacity":0},600, "linear", null);
}

function fadeBothTrigger(event)
{
$(".mushroom").animate({"opacity":0},600, "linear", null);
}

function unfade(event)
{
$(".mushroom").animate({"opacity":1},600, "swing", null);
}

function planeRollover(event)
{
$("#mushroom_1").animate({"left":500},1000, "linear", null);
}

function planeScale(event)
{
$("#plane").animate({"height":39,"width":60},1000, "linear", null);
}

$('#fadeOneTrigger').bind('mousedown', fadeOne);

$('#fadeBothTrigger').bind('mousedown', fadeBothTrigger);

$('#unFadeTrigger').bind('mousedown', unfade);

$('#mushroom_1').bind('mouseover', planeRollover);

$('#mushroom_1').bind('mouseover', planeScale);

});