なぜ私のイメージはアニメーション化していません

[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

グラム

出典

2010-11-26 XMen

私は答えを最初に与えたsytanxを変更してください...ちょうど冗談です。 – kobe

あなたのCSS +アニメーションの構文が間違っています。この1つを試してください

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

});

出典

2010-11-26 05:47:19

今は背景が動いていますが、このカードが欲しいです。 pngはこのボタンを修正したままにしておくことができますか？ – XMen

{'duration'：500}私のコードでこれが実行されているとは思いませんか？ – XMen

これはまた、ref http://jsfiddle.net/tKgy9/でも動作します。私はコードを最小限にしようとしていました。 –

あなたの構文は、バックグラウンドポジションのためにwroingされるように、このことのようにしてみてください

独自の座標を使用して、私は例を挙げた

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

この構文を試してみてくださいに見えます働くでしょう

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

出典

2010-11-26 05:43:18 kobe

あなたは何を言いたいのですか？私は説明していないです – XMen

@rahul、何も、それは今働いていますか？ – kobe

私は何を変える必要があり、どこにこれを助言してください？ – XMen

なぜ私のイメージはアニメーション化していません

答えて

関連する問題