Click-To-Fade Paragraphs (or other HTML Elements)

The trick here is to target all odd paragraph tags. This uses the very simple query language in jQuery: p:odd when authoring the sample in Glimmer.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec consequat tempor velit. Ut nisi. Nulla egestas porta risus. Sed mollis nulla vitae lectus. Praesent augue felis, fermentum ultricies, tempus ut, auctor venenatis, elit. Fusce id massa. Sed turpis. Curabitur justo leo, tincidunt sit amet, bibendum eu, laoreet quis, augue. Nunc non orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla gravida, lacus sit amet fermentum suscipit, metus odio varius dui, non consequat mi tellus sed nisl.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean velit elit, fermentum eget, suscipit vel, semper et, leo. Maecenas varius auctor lectus. Nunc lacinia vehicula augue. Sed vitae urna. Mauris libero eros, fermentum in, iaculis vitae, dignissim ut, orci. Phasellus facilisis eleifend dui. Quisque arcu. Sed luctus velit sit amet lacus venenatis semper. Phasellus id dolor. Nulla eget justo at nisi tempus volutpat. Nam interdum. Praesent eget felis. Suspendisse potenti. Curabitur nulla metus, porta porta, sagittis quis, sodales eget, velit. Vivamus varius erat nec quam.

Integer sit amet neque. Nam ullamcorper elementum erat. Cras vitae nibh. Suspendisse elementum viverra odio. Cras lacinia dictum turpis. Nunc porttitor, libero ut egestas fringilla, ipsum massa laoreet nulla, non laoreet erat leo eget nisl. Nunc viverra ligula quis libero. Proin semper vehicula diam. Nunc nec arcu et felis semper lobortis. Proin eleifend. Etiam massa. Curabitur sed velit. Nulla dapibus tempus sem. Pellentesque a nisl.

In euismod, nibh ac facilisis volutpat, ante lectus lobortis est, eu feugiat dui orci vel risus. Donec adipiscing. Pellentesque ipsum dolor, porta a, sollicitudin vitae, aliquet quis, felis. Nulla pulvinar tellus et risus. Suspendisse consequat. Curabitur nunc. Maecenas varius sodales neque. Morbi ac sapien a justo pellentesque commodo. Aliquam egestas. Phasellus lectus augue, bibendum vitae, mattis laoreet, placerat non, nibh. Aliquam iaculis est quis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eleifend, felis at scelerisque pharetra, diam quam lacinia ante, feugiat adipiscing sapien velit in nunc. Integer ligula velit, vestibulum non, tincidunt sit amet, lobortis et, justo. Nullam vel urna. Nulla pulvinar.

Duis molestie. Cras volutpat fermentum magna. Sed egestas ultrices metus. Fusce egestas tincidunt purus. Curabitur varius pretium massa. Donec feugiat massa eu odio. Vestibulum justo lorem, eleifend sit amet, iaculis in, feugiat eu, nulla. Maecenas sit amet mauris. Fusce dapibus, nunc in bibendum congue, erat purus tristique mauris, a consequat neque leo lobortis neque. Integer sit amet nulla nec velit pretium vehicula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam cursus pharetra elit. Quisque pretium posuere lacus. Ut arcu augue, accumsan ut, imperdiet non, ultrices sit amet, pede.

HTML

<ul>
<li id="textToClick" class="style1" style="margin-top:20px;"><a>Click this text to see all "odd numbered" paragraphs fade.</a></li>
<li id="textToClick2" class="style1"><a>Click this text to see all paragraphs unfade.</a></li>
</ul>
<div style="font-weight:normal;">
<p class="that" style="text-transform:none;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec consequat tempor
velit. Ut nisi. Nulla egestas porta risus. Sed mollis nulla vitae lectus. Praesent
augue felis, fermentum ultricies, tempus ut, auctor venenatis, elit. Fusce id massa.
Sed turpis. Curabitur justo leo, tincidunt sit amet, bibendum eu, laoreet quis,
augue. Nunc non orci. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nulla gravida, lacus sit amet fermentum suscipit, metus
odio varius dui, non consequat mi tellus sed nisl ...</p>
</div>



CSS

ul
{
list-style:none;
margin:0;
padding:0;
}

li{
margin-bottom:20px;
}

jQuery

jQuery(function($) {
var timer;
function fade(event)
{
$("p:odd").animate({"opacity":0.2},1000, "linear", null);
}

function unfade(event)
{
$("p:odd").animate({"opacity":1},1000, "linear", null);
}

$('#textToClick').bind('click', fade);

$('#textToClick2').bind('click', unfade);

});