Today I will tell you about another one useful tool of JQuery – backgroundPosition plugin. It allow to reach different design ideas with color/background changing.

As example, we want to create animated user friendly buttons or website navigation menu.

Someone can ask, why we need script if we can use hover effect + CSS styles. Here you will able to compare possibilities and see advantages of JQuery.

Here are Some very attractive samples:

• Live Demo
• download in package

How to do this? Not so difficult:

Step 1. HTML

Here are sources of all 5 samples. As you notice – we having simple unordered list, they all quite same, only have different ‘id’ attribute.

<ul id="ex1">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    <li><a href="#">Button 5</a></li>
</ul>

<ul id="ex2">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    <li><a href="#">Button 5</a></li>
</ul>

<ul id="ex3">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    <li><a href="#">Button 5</a></li>
</ul>

<ul id="ex4">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    <li><a href="#">Button 5</a></li>
</ul>

<ul id="ex5">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    <li><a href="#">Button 5</a></li>
</ul>

Step 2. CSS

<style type="text/css">
	h2 {padding-top:20px;clear:both;}
	ul {list-style:none;margin:0;padding:0;}
	li {float:left;width:100px;margin:0;padding:0;text-align:center;}
	li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
	li a:hover, li a:focus, li a:active {background-position:-150px 0;}
	li a {background:url(bg2.jpg) repeat 0 0;}
	#ex1 a {background:url(bg.jpg) repeat -20px 35px;}
	#ex2 a {background:url(bg2.jpg) repeat 0 0;}
	#ex3 a {background:url(bg3.jpg) repeat 0 0;}
	#ex4 a {background:url(bg4.jpg) repeat 0 0;}
	#ex5 a {background:url(bg4.jpg) repeat 0 0;}
</style>

Step 3. JQuery

<script type="text/javascript">
$(function(){
	$('#ex1 a')
		.css( {backgroundPosition: "-20px 35px"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
				$(this).css({backgroundPosition: "-20px 35px"})
			}})
		})
	$('#ex2 a')
		.css( {backgroundPosition: "0 0"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
				$(this).css({backgroundPosition: "0 0"})
			}})
		})
	$('#ex3 a')
		.css( {backgroundPosition: "0 0"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
		})
	$('#ex4 a')
		.css( {backgroundPosition: "0 0"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
		})

	$('#ex5 a')
		.css( {backgroundPosition: "0 0"} )
		.click(function(){
			$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:200})
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
		})
});
</script>

Step 4. Images

Also we need few images for these demos:

View Demo of our samples

download in package