Jquery Tutorial on how to Position Backgrounds
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:
Great article! I like how you compare the CSS version with the jQuery version. Very useful.
…. a great collection of tutorials using Jquery for correctly positioning backgrounds on websites…. a dynamite post here at “ScriptTutorials” !!
Great article. Thanks for putting together! Cheers Ted
While the enumeration has different ‘id’ attributes, it is but well laid and easily understood. And before I forget, the live demo is very much helpful.
haha ,,,i have finished a photo followed as your procedures ….thank you very much …Hope you teach me more knowledge …