jquery - flotante - pie de pagina bootstrap 4

jquery posición de fondo animada

Question

Parece que no puedo hacer que esto funcione.

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

La altura y el ancho animan, pero no el fondo.

Answer 1

¿Supongo que podría ser porque está esperando un solo valor?

tomado de la página animada en jQuery :

Propiedades y valores de animación

Todas las propiedades animadas deben estar animadas con un único valor numérico, excepto como se indica a continuación; la mayoría de las propiedades que no son numéricas no pueden ser animadas usando la funcionalidad básica de jQuery. (Por ejemplo, ancho, alto o izquierdo pueden ser animados pero el color de fondo no puede ser). Los valores de las propiedades se tratan como un número de píxeles a menos que se especifique lo contrario. Las unidades em y% se pueden especificar donde corresponda.

Answer 2

Como jQuery no es compatible con esto, la mejor solución que he encontrado hasta ahora es definir tus propios ganchos de CSS en jQuery. Básicamente, esto significa definir métodos personalizados para obtener y establecer valores CSS que también funcionan con jQuery.animate ().

Ya hay una implementación muy útil para esto en github: https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js

Con este complemento en su lugar, puedes hacer algo como esto:

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

Para mí, esto funcionó en todos los navegadores probados hasta el momento, incluido IE6 +.

Hice una demo rápida en línea hace un tiempo y puedes destrozarla si necesitas más orientación.

Answer 3

En su código jQuery hay una coma después de la porción backgroundPosition:

backgroundPosition: ''-20px 0px'',

Sin embargo, al enumerar las diversas propiedades que desea cambiar en el método .animate () (y métodos similares), el último argumento enumerado entre llaves no debería tener una coma después de él. No puedo decir si es por eso que la posición de fondo no se está cambiando, pero es un error y sugiero que se solucione.

ACTUALIZACIÓN: en las pruebas limitadas que acabo de hacer, ingresar valores puramente numéricos (sin "px") funciona para backgroundPosition en el método .animate (). En otras palabras, esto funciona:

backgroundPosition: ''-20 0''

Sin embargo, esto no:

backgroundPosition: ''-20px 0''

Espero que esto ayude.

Answer 4

La función animada de jQuery no se puede usar exclusivamente para animar directamente las propiedades de los objetos DOM. También puede interpolar variables y usar la función de paso para obtener las variables para cada paso de la interpolación.

Por ejemplo, para animar una posición de fondo desde la posición de fondo (0px 0px) a la posición de fondo (100px 500px) puede hacer esto:

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

Solo asegúrate de no olvidar esto. dentro de la función de paso.

Answer 5

No necesita usar el plugin animado de fondo si solo usa valores separados como este:

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

Answer 6

No puedes usar Animate de jquery simple para hacer eso ya que involucra 2 valores.

Para resolverlo solo incluye el https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js y puedes animar fondos a voluntad.

Answer 7

Puede cambiar la posición de fondo de la imagen usando el método setInterval, vea la demostración aquí: http://jquerydemo.com/demo/animate-background-image.aspx

Answer 8

También puede usar la combinación matemática "- =" para mover el fondo

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

Answer 9

Tengo un div My_div 250px x 250px, una imagen de fondo también 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);
}); 

Espero que te ayude

Answer 10

Usando Firefox:
especificando dos valores: no funciona con ninguna combinación de sintaxis, como se señaló anteriormente. Usando Firebug, obtengo "Error en el valor de análisis para ''background-position''. Declaración caída". hasta que termine la animación

''backgroundPosition'': ''17 .5em ''- especificando 1 valor: funciona en FF y CHrome OPera, SF (Safari) e IE, con una advertencia de que el 2º valor o la posición y (vertical) se establece en "centro". Desde Firebug, el estilo del elemento se establece en:
style = "background-position: centro 17.5em;"

Answer 11

prueba backgroundPosition:"(-20px 0)"

Para comprobarlo, ¿está haciendo referencia a este plugin de posición de fondo ?

Ejemplo de ello en jsfiddle con el plugin de posición de fondo.

Answer 12

function getBackgroundPositionX(sel) {
    pos = $(sel).css(''backgroundPosition'').split('' '');
    return parseFloat(pos[0].substring(0, pos[0].length-2));
}

Esto devuelve el valor [x]. La longitud del número no tiene importancia. Podría ser, por ejemplo, 9999 o 0.