web-dev-qa-db-fra.com

jquery animer la position de fond

Je n'arrive pas à faire fonctionner ça.

$('#product_family_options_dd').animate({
  height: '300px',
  width: '900px',
  backgroundPosition: '-20px 0px',          
},

La hauteur et la largeur s'animent mais pas l'arrière-plan.

jqueryjquery-animatebackground-position
58
jimbo

Vous n'avez pas besoin d'utiliser le plugin d'animation en arrière-plan si vous utilisez simplement des valeurs séparées, comme ceci:

$('.pop').animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');
96
nnyby

Je suppose que cela pourrait être parce qu'il attend une valeur unique?

tiré de la page animée sur jQuery :

Propriétés et valeurs de l'animation

Toutes les propriétés animées doivent être animées avec une seule valeur numérique, sauf indication contraire ci-dessous; la plupart des propriétés non numériques ne peuvent pas être animées à l'aide de la fonctionnalité de base jQuery. (Par exemple, la largeur, la hauteur ou la gauche peuvent être animés, mais pas la couleur d'arrière-plan.) Les valeurs de propriété sont traitées en tant que nombre de pixels, sauf indication contraire. Les unités em et% peuvent être spécifiées le cas échéant.

40
Luke Duddridge

Étant donné que jQuery ne prend pas en charge cette configuration, la meilleure solution que j’ai trouvée jusqu’à présent est de définir vos propres crochets CSS dans jQuery. En gros, cela signifie définir des méthodes personnalisées pour obtenir et définir des valeurs CSS qui fonctionnent également avec jQuery.animate ().

Il existe déjà une implémentation très pratique pour cela sur github: https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js

Avec ce plugin en place, vous pouvez faire quelque chose comme ceci:

$('#demo1').hover(
  function() {
    $(this).stop().animate({
      backgroundPositionX: '100%',
      backgroundPositionY: '100%'
    });
  },
  function () {
    $(this).stop().animate({
      backgroundPositionX: '105%',
      backgroundPositionY: '105%'
    });
  }
);

Pour moi, cela a fonctionné sur tous les navigateurs testés jusqu'à présent, y compris IE6 +.

J'ai mis une rapide démo en ligne il y a quelque temps et vous pouvez la déchirer si vous avez besoin de conseils supplémentaires.

35
bfncs

la fonction animate de jQuery n'est pas exclusivement utilisable pour animer directement les propriétés d'objets DOM. Vous pouvez également interpoler des variables et utiliser la fonction step pour obtenir les variables pour chaque étape de l'interpolation. 

Par exemple, pour animer une position d'arrière-plan d'une position d'arrière-plan (0px 0px) à une position d'arrière-plan (100px 500px), vous pouvez procéder comme suit:

$({temporary_x: 0, temporary_y: 0}).animate({temporary_x: 100, temporary_y: 500}, {
    duration: 1000,
    step: function() {
        var position = Math.round(this.temporary_x) + "px " + Math.round(this.temporary_y) + "px";
        $("#your_div").css("background-position",  position);
    }
});

Assurez-vous simplement de ne pas oublier le ceci. dans la fonction step. 

9
eelkedev

Dans votre code jQuery, il y a une virgule après la portion backgroundPosition:

backgroundPosition: '-20px 0px',

Toutefois, lorsque vous répertoriez les différentes propriétés que vous souhaitez modifier dans la méthode .animate () (et des méthodes similaires), le dernier argument répertorié entre des accolades ne doit pas être suivi d'une virgule. Je ne peux pas dire si c'est la raison pour laquelle la position d'arrière-plan n'est pas modifiée, mais c'est une erreur et je suggérerais de la corriger.

UPDATE: Dans les tests limités que je viens de faire, la saisie de valeurs purement numériques (sans "px") fonctionne pour backgroundPosition dans la méthode .animate (). En d'autres termes, cela fonctionne:

backgroundPosition: '-20 0'

Cependant, cela ne veut pas:

backgroundPosition: '-20px 0'

J'espère que cela t'aides.

5
Jonathan Head

Vous pouvez également utiliser la combinaison mathématique "- =" pour déplacer l'arrière-plan

$(this).animate( {backgroundPositionX: "-=20px"} ,500);
3
user2030631

Vous ne pouvez pas utiliser Animate de jquery simple pour le faire car il implique 2 valeurs.

Pour le résoudre, incluez simplement Background Position Plugin et vous pourrez animer les fonds à votre guise.

3
BlackDivine

Vous pouvez modifier la position de l’arrière-plan de l’image à l’aide de la méthode setInterval (voir la démonstration ici: http://jquerydemo.com/demo/animate-background-image.aspx

2
mag

essayez backgroundPosition:"(-20px 0)"

Juste pour vérifier, est-ce que vous faites référence au plugin background position ?

Exemple sur jsfiddle avec le plugin de position d’arrière-plan.

2
Mark Coleman

J'ai un div My_div 250px x 250px, une image d'arrière-plan également 250 x 250

css:

#My_div {
    background: url("..//img/your_image.jpg") no-repeat;
    background-position: 0px 250px;
}

javascript:

$("#My_div").mouseenter(function() {
    var x = 250;
    (function animBack() {
        timer = setTimeout(function() {
            if (x-- >= 0) {
                $('#My_div').css({'background-position': '0px '+x+'px'});;
                animBack();
            }
        }, 10);
    })();

});
$("#My_div").mouseleave(function(){
    $('#My_div').css({'background-position': '0px 250px'}); 
    clearTimeout(timer);
});

J'espère que ça aide

0
fausto