JQuery Animate Image d’arrière-plan sur l’axe des Y

Il semble que je rencontre un problème avec l’animation JQuery. Je peux animer l’image d’arrière-plan dans le sens positif, mais pas dans le sens négatif. Des suggestions sur la façon de remédier à cela?

$(this).parent().css('background-position-y', '19px'); $(this).parent().animate({ 'background-position-y': '-=19px' }, 1000, 'linear'); 

Le positionnement de l’arrière-plan via background-position-x/y distinct est une fonctionnalité introduite par Internet Explorer mais jamais intégrée à une spécification W3C. Toute recommandation visant à l’append à la spécification a depuis été refusée.

Voir: http://snook.ca/archives/html_and_css/background-position-xy

Vous pouvez toujours créer votre propre petit plugin, ce n’est pas si difficile.

Avec jQuery 1.8, nous avons maintenant access à la méthode $ .Animation qui nous donne les valeurs animées directement sans trop de travail, nous pouvons donc faire quelque chose comme:

 $.fn.animateBG = function(x, y, speed) { var pos = this.css('background-position').split(' '); this.x = pos[0] || 0, this.y = pos[1] || 0; $.Animation( this, { x: x, y: y }, { duration: speed }).progress(function(e) { this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px'); }); return this; } 

Et puis pour l’utiliser, nous pouvons faire:

 $("#background").animateBG(x-value, y-value, speed);​ 

VIOLON

C’est quelque chose que j’ai cherché à obtenir une autre réponse il ya quelques jours. Il ne fonctionne que avec les pixels et a quelques limitations, mais il est simple et devrait fonctionner dans la plupart des cas.

Je suppose que quelque chose comme ceci ferait ce que vous voulez:

 $(this).parent() .css('background-position', '0 19px'); .animateBG(0, 0, 1000);​ 

@adeneo: cette solution ne fonctionne que si vous définissez

 this.x = pos[0].split('px')[0] || 0; this.y = pos[1].split('px')[0] || 0; 

Sinon, la position de départ sera mise à zéro.