jquery animar posição de fundo

Eu não consigo fazer isso funcionar.

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

A altura e a largura são animadas, mas não o fundo.

    Você não precisa usar o plug-in animate em segundo plano se usar apenas valores separados como este:

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

    Eu acho que pode ser porque está esperando um valor único?

    retirado da página animada no jQuery :

    Propriedades e Valores de Animação

    Todas as propriedades animadas devem ser animadas para um único valor numérico, exceto conforme indicado abaixo; a maioria das propriedades que não são numéricas não podem ser animadas usando a funcionalidade básica do jQuery. (Por exemplo, width, height ou left podem ser animados, mas a cor de fundo não pode ser.) Os valores de propriedade são tratados como um número de pixels, a menos que seja especificado de outra forma. As unidades em e% podem ser especificadas quando aplicável.

    Como o jQuery não suporta isso de fábrica, a melhor solução que encontrei até agora é definir seus próprios ganchos de CSS no jQuery. Essencialmente, isso significa definir methods personalizados para obter e definir valores de CSS, o que também funciona com jQuery.animate ().

    Já existe uma implementação muito útil para isso no github: https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js

    Com este plugin instalado, você pode fazer algo assim:

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

    Para mim, isso funcionou em todos os navegadores testados até agora, incluindo o IE6 +.

    Eu coloquei uma demonstração rápida on-line há algum tempo e você pode separá-la se precisar de mais orientação.

    A function animada do jQuery não é exclusivamente utilizável para animar diretamente as propriedades dos objects DOM. Você também pode interpolar variables ​​e usar a function de etapa para obter as variables ​​para cada etapa da interpolação.

    Por exemplo, para animar uma posição de fundo da posição de fundo (0 px 0 px) para a posição de fundo (100 px 500 px), você pode fazer isto:

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

    Apenas certifique-se de não esquecer o presente. dentro da function de passo.

    Em seu código jQuery, há uma vírgula após a parte backgroundPosition:

     backgroundPosition: '-20px 0px', 

    No entanto, ao listar as várias propriedades que você deseja alterar no método .animate () (e methods semelhantes), o último argumento listado entre chaves não deve ter uma vírgula após ele. Eu não posso dizer se é por isso que a posição de fundo não está sendo alterada, mas é um erro que eu sugiro corrigir.

    ATUALIZAÇÃO: Nos testes limitados que fiz agora, inserir valores puramente numéricos (sem “px”) funciona para backgroundPosition no método .animate (). Em outras palavras, isso funciona:

     backgroundPosition: '-20 0' 

    No entanto, isso não acontece:

     backgroundPosition: '-20px 0' 

    Espero que isto ajude.

    Você também pode usar a combinação matemática “- =” para mover o plano de fundo

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

    Você não pode usar o Animate simples do jquery para fazer isso, pois envolve 2 valores.

    Para resolvê-lo basta include o plugin de posição de fundo e você pode animar os fundos à vontade.

    tente backgroundPosition:"(-20px 0)"

    Apenas para verificar novamente, você está fazendo referência a este plugin de posição de fundo ?

    Exemplo disso em jsfiddle com o plugin de posição de fundo.

    Você pode alterar a posição do fundo da imagem usando o método setInterval, veja a demonstração aqui: http://jquerydemo.com/demo/animate-background-image.aspx

    Eu tenho um div My_div 250px x 250px, uma imagem de fundo também 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 ajude

    Usando o Firefox:
    especificando dois valores: Não funciona com qualquer combinação de syntax – como vários apontados acima. Usando o Firebug, recebo “Erro ao analisar o valor para ‘posição de fundo’. Declaração descartada.” até a animação terminar.

    ‘backgroundPosition’: ’17 .5em ‘- especificando 1 valor: funciona em FF e Chrome Opera, SF (Safari) e IE, com uma ressalva de que o 2º valor ou a posição y (vertical) é ajustada para “center”. Do Firebug, o estilo do elemento é definido como:
    style = “background-position: 17.5em center;”

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

    Isso retorna o valor [x]. O comprimento do número não tem importância. Pode ser, por exemplo, 9999 ou 0.