Looping Images with jQuery/Javascript on Hover

By Clifton Hatfield on November 24, 2012

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 &amp; a round we go.*/
jQuery.fn.nextFirst = function(e){
    var next = this.next(e);
    return (next.length) ? next : this.prevAll(e).last();
}

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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Loop Thumbnails</title>

.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>

</li>

</ul>

</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.

View all posts by Clifton Hatfield →

Subscribe to our e-mail newsletter to receive updates.

CSS3 Media Queries / Mobile / iPhone

WordPress Placeholder Plugin

1 comments

Newest | Oldest

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?

Navigation

Looping Images with jQuery/Javascript on Hover

jQuery

HTML

About Clifton Hatfield

Subscribe

Related Posts: