Hello there! I'm currently experimenting with animating a background image using jQuery. Despite following a tutorial, I haven't been successful in getting my test page to work as intended. The blue Facebook icon displays, but it doesn't animate upwards upon mouseover to reveal the gray logo. Any assistance would be greatly appreciated! I must admit, I am quite new to jQuery.
Here is a link to my test page:
The animation should make the Facebook icon move upwards. The full image can be found below:
My CSS Code
<style>
#facebook_icon li {
padding: 0;
width: 120px;
height: 119px;
list-style: none;
background: red;
background:url('img/fb_120x238.png') repeat 0 0;
}
</style>
HTML Markup
<ul id="facebook_icon">
<li><a href="#"><div class="box"></div></a></li>
</ul>
Javascript Function
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
<script>
(function() {
$('#facebook_icon li')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -119px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
})();
</script>
UPDATE: IMPLEMENTED CSS3 Solution
CSS3 Styling
#facebook_icon li {
padding: 0;
width: 120px;
height: 119px;
list-style: none;
background: red;
background:url('img/fb_120x238.png') repeat 0 0;
-moz-transition: background-position 1s;
-webkit-transition: background-position 1s;
-o-transition: background-position 1s;
transition: background-position 1s;
background-position: 0 0;
}
#facebook_icon li:hover{
background-position: 0 -119px;
}
.box {
width: 120px;
height: 119px;
}
Updated HTML Structure (An added empty div box for better functionality)
<ul id="facebook_icon">
<li><a href="#"><div class="box"></div></a></li>
</ul>