Þórsdagr Kanna
Thorsday Research Project
Innerfade
Files Needed
jquery.innerfade.js, jq_fade.css
Inline Code
In the head:
<script type="text/javascript" src="scripts/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});
$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '250px'
});
$('.fade').innerfade({
speed: 1000,
timeout: 6000,
type: 'random_start',
containerheight: '1.5em'
});
$('.adi').innerfade({
speed: 'slow',
timeout: 5000,
type: 'random',
containerheight: '250px'
});
});
</script>
<link rel="stylesheet" href="styles/jq_fade.css" type="text/css" media="all" />
In the body:
<div id="display">
<ul id="portfolio">
<li>
<a href="http://lifehacker.com/139158/macgyver-tip-remove-bumper-
stickers-with-wd40"><img src="images/rda1.jpg" alt="BRAVO" /></a>
</li>
<li>
<a href="http://en.wikipedia.org/wiki/Pinniped"><img src="
images/rda2.jpg" alt="Seal Stealth" /></a>
</li>
<li>
<a href="http://www.teeballusa.org/"><img src="
images/rda3.jpg" alt="Baseball Coach" /></a>
</li>
<li>
<a href="http://www.imdb.com/name/nm0000483/"><img src="
images/rda4.jpg" alt="Old-man Anderson" />.</a>
</li>
</ul>
</div>
Special Considerations
Degrades as a list of images. Would destroy formatting. This could be over come with something like this:
#display {
height: 250px;
overflow:hidden;
}