[SOLUCIONADO] Animacion on hover con jQuery y CSS

[sQs]

Hola a todos, escribo de nuevo porque ya me hice loco buscando como puedo conseguir un efecto tan simple con java y css, la cosa es que logro hacerlo pero no como yo quiero y lo que trato de hacer es lo siguiente:
Por ejemplo tengo un css con un simple div, algo asi:

Código CSS:

.claseX {
width: 20px;
height: 20px;
background: red;
}
.claseX:hover {
background: black;
}
 

Como pueden ver es un ejemplo simple de un cuadro en color rojo y al pasar el raton se hara negro, lo que quiero hacer es que haga eso mismo pero con un efecto en jquery una animacion simple y no puedo conseguirlo. alguien me puede dar una manita del procedimiento en java por favor.

[razpeitia]

Java != JavaScript

Movido desde Java.

[sQs]

Disculpa por que no lo puse en el lugar correcto.
Alguien tiene alguna idea como hacerlo?

[alberto510a]

Buenas amigo,

Primero que nada debes tener claro que JavaScript y Java son 2 cosas totalmente diferente es algo que se suele confundir a menudo en la gente que recién comienza, después decirte que con jQuery el método animate() en concreto no puede conseguir animaciones de color por sí solo para ello debe hacer uso de un plugin. Aquí te prepare un ejemplo usando el plugin:

Código Javascript:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>
<script>
$(document).ready(function(){
    $('#a').click(function(){
        $('body').animate({'background-color':'#143130'},5000);
    });
});
</script>
 

Código HTML:

<button id="a">click</button>
 

Saludos!

[Trublux]

Puedes usar "transform" de CSS3:

Código CSS:

.claseX {
width: 20px;
height: 20px;
background: red;
transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
}
.claseX:hover {
background: black;
transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
}
 

[sQs]

Gracias alberto y trublux, les comento que finalmente consegui hacerlo de la siguiente manera igualmente usando jquery:

Código Javascript:

$('#id_del_bloque').css("background","#fff");
    $('#id_del_bloque').hover(
        function() {
            $(this).stop().animate({backgroundColor:'#eee'}, 500);
            }, function () {
            $(this).stop().animate({backgroundColor:'#fff'}, 500);
        });
 

De esta manera tengo mi bloque en color blanco y al pasar el raton se cambia a gris claro con un efecto suave.

Me interesa mucho el tema de las transiciones en hover usando CSS, solo que he leido que aun no es compatible con muchos navegadores y por supuesto que me imagino que el menos compatible a de ser IE como siempre.

Saludos a todos y de nuevo gracias por su ayuda.