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 se animan pero no el fondo.
No necesita usar el complemento de animación de fondo si solo usa valores separados como este:
$('.pop').animate({ 'background-position-x': '10%', 'background-position-y': '20%' }, 10000, 'linear');¿Supongo que podría ser porque espera un valor único?
tomado de la página animada en jQuery :
Todas las propiedades animadas deben animarse a un solo valor numérico, excepto como se indica a continuación; la mayoría de las propiedades que no son numéricas no se pueden animar con la funcionalidad básica de jQuery. (Por ejemplo, el ancho, el alto o la izquierda se pueden animar, pero el color de fondo no). Los valores de propiedad se tratan como una cantidad de píxeles, a menos que se especifique lo contrario. Las unidades em y % se pueden especificar cuando corresponda.
Dado que jQuery no es compatible con esto, la mejor solución que he encontrado hasta ahora es definir sus propios ganchos 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 existe 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, puede 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 ahora, incluido IE6+.
Puse una demostración rápida en línea hace un tiempo y puede desarmarla si necesita más orientación.