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

He fell in love with the WordPress Publishing Platform and has been creating themes and plugins for it ever since. He is the kind of guy that can read code better than he can read a book. Often, you can find him hunched over a keyboard delivering his magic. He likes cold pizza, walking on moving sidewalks, and Indiana Jones. Clifton co-founded The Internet Lifestyle Network.
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