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:
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.
02 | <li><a href="#">Button 1</a></li> |
03 | <li><a href="#">Button 2</a></li> |
04 | <li><a href="#">Button 3</a></li> |
05 | <li><a href="#">Button 4</a></li> |
06 | <li><a href="#">Button 5</a></li> |
10 | <li><a href="#">Button 1</a></li> |
11 | <li><a href="#">Button 2</a></li> |
12 | <li><a href="#">Button 3</a></li> |
13 | <li><a href="#">Button 4</a></li> |
14 | <li><a href="#">Button 5</a></li> |
18 | <li><a href="#">Button 1</a></li> |
19 | <li><a href="#">Button 2</a></li> |
20 | <li><a href="#">Button 3</a></li> |
21 | <li><a href="#">Button 4</a></li> |
22 | <li><a href="#">Button 5</a></li> |
26 | <li><a href="#">Button 1</a></li> |
27 | <li><a href="#">Button 2</a></li> |
28 | <li><a href="#">Button 3</a></li> |
29 | <li><a href="#">Button 4</a></li> |
30 | <li><a href="#">Button 5</a></li> |
34 | <li><a href="#">Button 1</a></li> |
35 | <li><a href="#">Button 2</a></li> |
36 | <li><a href="#">Button 3</a></li> |
37 | <li><a href="#">Button 4</a></li> |
38 | <li><a href="#">Button 5</a></li> |
Step 2. CSS
01 | <style type="text/css"> |
02 | h2 {padding-top:20px;clear:both;} |
03 | ul {list-style:none;margin:0;padding:0;} |
04 | li {float:left;width:100px;margin:0;padding:0;text-align:center;} |
05 | li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;} |
06 | li a:hover, li a:focus, li a:active {background-position:-150px 0;} |
07 | li a {background:url(bg2.jpg) repeat 0 0;} |
08 | #ex1 a {background:url(bg.jpg) repeat -20px 35px;} |
09 | #ex2 a {background:url(bg2.jpg) repeat 0 0;} |
10 | #ex3 a {background:url(bg3.jpg) repeat 0 0;} |
11 | #ex4 a {background:url(bg4.jpg) repeat 0 0;} |
12 | #ex5 a {background:url(bg4.jpg) repeat 0 0;} |
Step 3. JQuery
01 | <script type="text/javascript"> |
04 | .css( {backgroundPosition: "-20px 35px"} ) |
05 | .mouseover(function(){ |
06 | $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500}) |
09 | $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){ |
10 | $(this).css({backgroundPosition: "-20px 35px"}) |
14 | .css( {backgroundPosition: "0 0"} ) |
15 | .mouseover(function(){ |
16 | $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500}) |
19 | $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){ |
20 | $(this).css({backgroundPosition: "0 0"}) |
24 | .css( {backgroundPosition: "0 0"} ) |
25 | .mouseover(function(){ |
26 | $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500}) |
29 | $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) |
32 | .css( {backgroundPosition: "0 0"} ) |
33 | .mouseover(function(){ |
34 | $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500}) |
37 | $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) |
41 | .css( {backgroundPosition: "0 0"} ) |
43 | $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:200}) |
46 | $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) |
Step 4. Images
Also we need few images for these demos:
