why my image is not animating
![background.png][1] ![card.png][2] want to show this card.png in button and background image will be moving on mouseover and mouse out .
<style type="text/css">
#tb_whisper {
background-image:url("background.png") !important;
}
.tb_send {
background:-moz-linear-gradient(center bottom , #000000 0%, #B8B6B6 100%) repeat scroll 0 0 transparent;
border:1px solid red;
color:#FFFFFF;
cursor:pointer;
float:left;
height:28px;
margin-right:4px;
}
.ui-corner-all {
-moz-border-radius:4px 4px 4px 4px !important;
}
.toolbar {
-moz-border-radius:0 0 4px 4px;
background:-moz-linear-gradient(center bottom , #000000 0%, #B8B6B6 100%) repeat scroll 0 0 transparent;
height:28px;
vertical-align:middle;
padding:4px 0;
}
.tb_nav {
border:1px solid #FFFFFF;
cursor:pointer;
float:le开发者_JAVA百科ft;
height:28px;
margin-right:4px;
width:28px;
}
button::-moz-focus-inner {
border:0;
padding-top:0;
}
</style>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.tb_nav')
.mouseover(function(){
$(this).animate(
{'backgroundPosition':"(-36px 0px)"},
{'duration':500});
})
.mouseout(function(){
if(!$(this).hasClass('tb_nav_active')) {
$(this).animate(
{'backgroundPosition':"(0 0)"},
{'duration':500});
}
});
});
</script>
</head>
<body>
<button style="background-position: 0px 0px;" id="tb_whisper" title="Whisper" class="tb_nav ui-corner-all">
</button></html>![alt text][3]
[backgrund]: http://i.stack.imgur.com/JEbd4.png
[card ]: http://i.stack.imgur.com/So7Re.png
[3]: http://i.stack.imgur.com/18jx0.pn
g
Your css + animation syntax is wrong. try this one
$(document).ready(function(){
$('.tb_nav')
.mouseover(function(){
$(this).stop().animate({backgroundPosition: "-36px 0"}, 500);
})
.mouseout(function(){
if(!$(this).hasClass('tb_nav_active')) {
$(this).stop().animate({backgroundPosition: "0 0"}, 500);
}
});
});
looks like your syntax is wroing for background position try this syntax
('background-position', '0px 0px');
I just gave example, use your own co-ordinates
try like this it will work
.animate({backgroundPosition: '500px 150px'})
加载中,请稍侯......
精彩评论