Skip to content

Instantly share code, notes, and snippets.

@amnuts
Last active December 27, 2015 08:59
Show Gist options
  • Save amnuts/7300951 to your computer and use it in GitHub Desktop.
Save amnuts/7300951 to your computer and use it in GitHub Desktop.
Quick and easy way to cross-fade between elements in a list. If those elements contained images then you have a very simple slideshow. (Requires jQuery.)
if ($('ul.crossfade').length) {
$('ul.crossfade').each(function(){
var ul = $(this);
if ($('li', ul).length > 1) {
$('li:gt(0)', ul).hide();
var fadeSpeed = (ul.attr('data-fadespeed') !== undefined ? ul.attr('data-fadespeed') : 1000);
var nextSpeed = (ul.attr('data-nextspeed') !== undefined ? ul.attr('data-nextspeed') : 5000);
setInterval(function(){
$('li:first', ul)
.fadeOut(fadeSpeed).next('li')
.fadeIn(fadeSpeed).end()
.appendTo(ul);
}, nextSpeed);
}
})
}
ul.crossfade {
position:relative;
list-style-type:none;
}
ul.crossfade li {
position:absolute;
left:0;
top:0;
}
ul.crossfade li:first-child ~ li {
display:inline;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment