pourquoi mon image n'anime pas

! [Background.png] [1] ! [Card.png] [2] voulez montrer cette carte.png dans le bouton et l'image de fond se déplacera au passage de la souris et à la souris.pourquoi mon image n'anime pas

<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

Source

2010-11-26 XMen

changer le sytanx cela devrait fonctionner ,,, j'ai donné la réponse en premier ... je plaisante. – kobe

Votre syntaxe d'animation css + est incorrecte. essayer celui-ci

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

});

Source

2010-11-26 05:47:19

maintenant le fond bouge c'est bien mais je veux cette carte. png pour rester fixe sur ce bouton, comment je peux à cela? – XMen

{'duration': 500} ne pouvons-nous pas donner comme ceci il fonctionne dans mon code? – XMen

Cela fonctionnerait aussi ref http://jsfiddle.net/tKgy9/. J'essayais de minimiser le code. –

ressemble à votre syntaxe est wroing pour la position de fond essayez cette syntaxe

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

Je viens de donner par exemple, utilisez vos propres coordonnées

essayer comme ça, ce fonctionnera

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

Source

2010-11-26 05:43:18 kobe

ce que vous voulez dire que je ne reçois pas s'il vous plaît expliquer – XMen

@rahul, rien, est-ce que ça marche maintenant ?? – kobe

ce que je dois changer et où veuillez le conseiller? – XMen

pourquoi mon image n'anime pas

Répondre

Questions connexes