Почему мое изображение не анимируется

! [Background.png] [1] ! [Card.png] [2] хочу показать эту карту.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 2010-11-26 05:50:00

Ваш синтаксис 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

выглядит ваш синтаксис wroing для фоновой позиции попробовать этот синтаксис

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

Я просто привел пример, использовать свои собственные координаты

попробовать, как этого будет работать

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

источник

2010-11-26 05:43:18 kobe

то, что вы хотите сказать, я не получаю, пожалуйста, объясните – XMen 2010-11-26 06:08:15

@rahul, ничего, сейчас он работает? – kobe 2010-11-26 06:16:43

Почему мое изображение не анимируется

ответ

Смежные вопросы