Animar transición de background

[madman_18]

Hola a todos!

Tengo una duda sobre cómo animar esta transición:

Código Javascript:

$(document).ready(function(){
               $('#bloque-destacado-1').hover(function(){
                   $('#bloque-destacado-1').css({'background-position':'0 -200px'},'200');
               },function(){
                  $('#bloque-destacado-1').css({'background-position':'0 0'},'200');
               });
            });
 

Me hace el cambio, pero cuando intento meter el .animate, no me funciona o no sé como ponerlo jeje.

¿Alguna ayudita? jeje Gracias!!

[alberto510a]

Hola.

Creo que has mezclado bastante ahí jeje.
Para animar "objetos" jQuery tiene su propio método que es muy sencillo de usar aquí te pongo un ejemplo y te explico los parámetros y tú solo lo cambias.

Código:

$(document).ready(function(){
$('#bloque-destacado-1').mouseenter(function(){
$(this).animate({height:'900px',width:'990px'},2000,function(){
//función callback
});
});
});

A ver el método como ves es .animate() y ocurre al meter el mouse dentro de nuestro elemento. Tan solo tenemos que indicar el parámetro css a animar, su objetivo, el tiempo en milisegundos y si quisieramos una función callback.

Estos son los 3 parámetros más usados de este método.

Saludos.

[madman_18]

Iniciado por alberto510a

Hola.

Creo que has mezclado bastante ahí jeje.
Para animar "objetos" jQuery tiene su propio método que es muy sencillo de usar aquí te pongo un ejemplo y te explico los parámetros y tú solo lo cambias.

Código:

$(document).ready(function(){
$('#bloque-destacado-1').mouseenter(function(){
$(this).animate({height:'900px',width:'990px'},2000,function(){
//función callback
});
});
});

Sí, he probado la función .animate, pero cuando le meto la propiedad 'backgroundPosition' (creo que es así como debe escribirse) no modifica nada, de ahí que pregunte :S :S

A ver el método como ves es .animate() y ocurre al meter el mouse dentro de nuestro elemento. Tan solo tenemos que indicar el parámetro css a animar, su objetivo, el tiempo en milisegundos y si quisieramos una función callback.

Estos son los 3 parámetros más usados de este método.

Saludos.

[alberto510a]

Perdón fue un error mío me olvidé colocar las comillas en una zona:

Código:

$(this).animate({'background-position':''},2000,function(){

Sería así como tienes que ponerlo background-position y además entre comillas, dos puntos, y el valor entre comillas.

Saludos.

[madman_18]

Iniciado por alberto510a

Perdón fue un error mío me olvidé colocar las comillas en una zona:

Código:

$(this).animate({'background-position':''},2000,function(){

Sería así como tienes que ponerlo background-position y además entre comillas, dos puntos, y el valor entre comillas.

Saludos.

Pues no entiendo qué hago mal....porque no me lo coge...
Lo tengo puesto tal que así:

Código Javascript:

$('#bloque-completo-2').animate({'background-position':'0 -200px'},200);
 

[alberto510a]

Hola de nuevo.

Si te digo la verdad no se porque no funciona con 2 valores yo puse solo con 1 y me funciono perfectamente así:

Código:

$('#bloque-completo-2').animate({'background-position':'200px'},200);

A ver si alguien más que sepa del tema puede comentar y nos dice donde esta el error.

Saludos.