Submit your widget
HomeText & Link EffectsClick to fade text paragraphs jQuery

Click to fade text paragraphs jQuery

Created 14 years ago   Views 7168   downloads 1334    Author n/a
Click to fade text paragraphs jQuery
View DemoDownload
92
Share |

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.

 

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);
 
});

 

 

Tag: text fade

You might also like