Pourquoi la fonction d'animation jQuery backgroundPosition saute-t-elle au lieu d'animer?

J'essaie de créer 3 boutons (l'image est une image d'arrière-plan) qui s'animent facilement lorsque vous passez la souris. Lorsque j'utilise les formats html, css et js suivants, le résultat est une animation jquery où l'animation saute juste au résultat au lieu de créer une animation fluide vers le résultat.Pourquoi la fonction d'animation jQuery backgroundPosition saute-t-elle au lieu d'animer?

Voir le résultat à: http://infinitize.com, actuellement seul le premier bouton est animé.

CSS:

/*-- HOMEPAGE --*/ 
#buttons {margin-top:60px;} 
#buttons a {display:inline-block;width:160px;border-bottom:none;color:#4b4f52;text-shadow:0 1px 0 #fff;font-size:20px;padding-top:180px;text-align:center;} 
.bg-img-home {background:transparent url(<r:assets:url title="bg-img-home" />) no-repeat;} 
#webdesign {background-position:0px 0px;}

HTML:

<div id="buttons" class="span-24 last"> 
    <div class="span-3">&nbsp;</div> 
    <div id="webdesign" class="span-5 bg-img-home"><a href="#" id="jump-webdesign">WebDesign<br />Web Development</a></div> 
    <div class="span-2">&nbsp;</div> 
    <div id="ecommerce" class="span-5 bg-img-home"><a href="#" id="jump-ecommerce">E-Commerce Solutions</a></div> 
    <div class="span-2">&nbsp;</div> 
    <div id="openbravo" class="span-5 bg-img-home"><a href="#" id="jump-openbravo">OpenBravo<br />ERP/POS solutions</a></div> 
    <div class="span-2 last">&nbsp;</div> 
</div>

Script:

$(document).ready(function(){ 
    $("#jump-webdesign").hover(function(){ 
      $("#webdesign") 
      .animate({backgroundPosition: '0px -10px'},200).animate({backgroundPosition:'0px 0px'},200) 
    }); 
});

Source

2010-03-30 Michael Torfs

semble fonctionner correctement dans Chrome, essayez de faire monter votre durée 200ms à quelque chose de beaucoup plus comme 1500ms et regarder les résultats. –

C'était ma réponse, et il fait la même chose dans Chrome. –

ok, changé à 1500ms, il saute, pas d'animation ici en FF3.6.2 –

Réglez votre temps Animer à quelque chose plus, 200 millisecondes est très rapide.

Sur la base de votre commentaire, essayez d'animer la marge supérieure:

$("#jump-webdesign").hover(
    function() { 
     $(this).children("#webdesign").animate({ 
      marginTop: "-10px" 
     }, 500); 
    }, 
    function() { 
     $(this).children("#webdesign").animate({ 
      marginTop: "0px" 
     }, 500); 
    } 
);

Source

2010-03-30 19:05:32

ok, changé à 1500ms, il saute, n'anime pas ici en FF3.6.2 –

Vérifier ma mise à jour –

Pourquoi la fonction d'animation jQuery backgroundPosition saute-t-elle au lieu d'animer?

Répondre

Questions connexes