Question

！[background.png] [1] ！[card.png] [2] 想要在按钮和背景图像中显示此card.png将在鼠标悬停和鼠标移动时移动。

 <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:left;
    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

克

Answer 1

看起来你的语法背景位置是错误的尝试这种语法

   ('background-position', '0px 0px');

我刚给出了例子，使用你自己的坐标尝试这样就可以了

.animate({backgroundPosition: '500px 150px'})

Answer 2

您的css +动画语法错误。试试这个

$(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);
        }
    }); 

});

为什么我的图像不是动画

2 个答案: