Looping Images with jQuery/Javascript on Hover

I’ll be honest with you, this one racked my brain for awhile. I don’t really know why I had so much trouble with this because I write jQuery all of the time. To avoid you going through the same trouble that I had, here is the jQuery script I wrote to infinitely rotate images when the mouse hovers over the images. If you have some tips, leave a comment.

Maybe one day I’ll get around to writing up a WordPress Plugin for this. :)

Demo

jQuery

jQuery(function($){
        /*Loop through thumbnails*/
	var loop = '';
	$('.list-item').mouseover(function(){
		var e = $(this);
		loop = setInterval(function(){
			$('span', e).filter(function(){
				var match = '1';
				return ($(this).css('opacity') == match);
			}).animate({'opacity':'0'}).nextFirst().animate({'opacity':'1'}, 300);
		}, 1000);
	}).mouseout(function(){
		clearInterval(loop);
	});
});

/*Get next sibling if it exists. If not, get first sibling. Round & a round we go.*/
jQuery.fn.nextFirst = function(e){
    var next = this.next(e);
    return (next.length) ? next : this.prevAll(e).last();
}

 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loop Thumbnails</title>
<style type="text/css">
	.list-item {width:206px;height:206px;list-style-type:none;position:relative;}
	.thumbnail {position:absolute;top:0;left:0;display:inline-block;width:206px;height:206px;background-position:center center;background-repeat:no-repeat;opacity:0;}
	.thumbnail:first-child {opacity:1;}
</style>
</head>
<body>
<ul id="list">
	<li class="list-item">
    	<span style="background-image:url(http://sphotos-b.xx.fbcdn.net/hphotos-ash4/s320x320/229959_10151042752614553_278263841_n.jpg);" class="thumbnail"></span>
    	<span style="background-image:url(http://sphotos-a.xx.fbcdn.net/hphotos-ash3/s320x320/36166_494075809552_4158755_n.jpg);" class="thumbnail"></span>
    	<span style="background-image:url(http://sphotos-b.xx.fbcdn.net/hphotos-ash3/s320x320/65935_494075464552_6738693_n.jpg);" class="thumbnail"></span>
    </li>
</ul>
<!-- Load the jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<!-- Load the looping script -->
<script src="js.js" type="text/javascript"></script>
</body>
</html>

 

About Clifton Hatfield

Clifton is the kind of guy that can read code better than he can read a book and prefers it that way. He likes cold pizza, moving sidewalks, and Indiana Jones. Clifton co-founded Internet Lifestyle Network from his home office in 2012 and he believes that true leadership is to inspire.
3 comments
underclass
underclass

This is a great piece of code, I'd like to create a very fast hover effect where images flick past as you hover, I've tried to reduce the delay for opacity animation and the transition delay but this comes up with a strange quirk when hovering. Do you have any tips on achieving this effect?

underclass
underclass

This is a great piece of code, I'd like to create a very fast hover effect where images flick past as you hover, I've tried to reduce the delay for opacity animation and the transition delay but this comes up with a strange quirk when hovering. Do you have any tips on achieving this effect?

clumsy
clumsy

Thanks a lot for this snippet. I was trying and looking for days. This does exactly what i wanted! :D Can you maybe explain or post code so that when the mouse goes out, the first thumb is shown again? Greets clumsy