Posts

Today I will tell you about another one useful tool of JQuery - backgroundPosition plugin. It allow to reach different design ideas with color 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:

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

or here (without dolphin headers)

download in package