jquery animer la position de fond

Question

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.

Answer 1

Vous n'avez pas besoin d'utiliser le plug-in 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');
 

Answer 2

Je suppose que c'est peut-être parce qu'il s'attend à une seule valeur?

prises à partir de l' animer la page sur jQuery:

Animation des Propriétés et des Valeurs

Le tout animé propriétés doivent être animés d'une valeur numérique unique, sauf comme il est indiqué ci-dessous; la plupart des propriétés qui sont non numériques ne peuvent pas être animés à l'aide de la fonctionnalité de base de jQuery. (Par exemple, la largeur, la hauteur ou la gauche peut être animé, mais la couleur d'arrière-plan ne peut pas être.) Les valeurs de propriété sont considérés comme un certain nombre de pixels à moins d'indication contraire. Les unités em et % peuvent être spécifiés, le cas échéant.

Answer 3

Depuis jQuery ne prend pas en charge cette sortie de la boîte, la meilleure solution que j'ai rencontré jusqu'à présent est de définir votre propre CSS crochets en jQuery. Essentiellement, cela signifie pour définir des méthodes get et set CSS valeurs qui travaille également avec jQuery.animate().

Il existe déjà un outil très pratique pour la mise en œuvre de ce sur github: https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js

Avec ce plugin, 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+.

Je n'ai mis une rapide démo en ligne il y a un moment et vous pouvez ripper un de l'autre si vous avez besoin de plus de conseils.

Answer 4

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

Par exemple, pour animer un background-position de background-position(0px 0px) de background-position(100px 500px) vous pouvez le faire:

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

Veillez juste à ne pas oublier le présent. à l'intérieur de la fonction step.

Answer 5

Dans votre code jQuery il y a une virgule après le backgroundPosition partie:

backgroundPosition: '-20px 0px',

Toutefois, en énumérant les différentes propriétés que vous souhaitez modifier dans la .animate (), méthode (et des méthodes similaires), le dernier argument répertoriés entre accolades ne devrait pas avoir de virgule après elle. Je ne peux pas dire si c'est pourquoi le fond n'est pas changé, mais c'est une erreur et que je vous suggère de fixation.

Mise à JOUR: Dans le peu de tests que j'ai fait tout à l'heure, en entrant purement valeurs numériques (sans le "px") fonctionne pour backgroundPosition dans le .animate() de la méthode. En d'autres termes, cela fonctionne:

backgroundPosition: '-20 0'

Cependant, ce n'est pas:

backgroundPosition: '-20px 0'

Espérons que cette aide.