내 이미지에 애니메이션이 적용되지 않는 이유는 무엇입니까?

[background.png] [1] [card.png] [2] 이 card.png를 버튼에 표시하려고하고 배경 이미지가 마우스 오버 및 마우스 아웃시 이동합니다. 당신의 구문이이 같은 시도 자신의 좌표내 이미지에 애니메이션이 적용되지 않는 이유는 무엇입니까?

를 사용,이 구문

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

난 그냥 준에게 예를 시도 배경 위치를 wroing처럼

<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 + 애니메이션 구문이 잘못되었습니다. 이 하나를 시도하십시오

$(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

그것은 http://jsfiddle.net/tKgy9/에서도 작동 할 것입니다. 코드를 최소화하려고했습니다. –

보인다 will will work

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

출처

2010-11-26 05:43:18 kobe

당신이 원하는 것을 말하고 싶습니다. 설명해주십시오. – XMen

@rahul, 아무것도, 지금 작동합니까 ?? – kobe

내가 무엇을 바꿔야하는지, 그리고 어디에서 조언을 해주시겠습니까? – XMen

내 이미지에 애니메이션이 적용되지 않는 이유는 무엇입니까?

답변

관련 문제