Transición de imagen de fondo

[albert84]

Hola,

estoy intentado hacer una transición de una imagen de fondo en un div, lo hago por css con el #identificador:hover, cambiando la imagen, pero este cambio es de golpe, quiero conseguir que haga un pequeño efecto y no sea de golpe, utilizando jquery existe el animate(), pero con la propiedad background-image de css, no me funciona (creo que no se puede), con otras va perfecto.

Alguna solución o alternativa, muchas gracias de antemano.

[caricatos]

Hola:

No sé porqué pusiste el tema en Ajax, si el problema no necesita peticiones al servidor... por eso lo movemos a javascript... pero dependería de que transición quieres... si fuese de movimiento, se puede modificar el estilo background-position (con javascript se quita el guión y se capitaliza el resto...)

Saludos

[albert84]

Pensé que la habia puesto en javascript, que raro...

No es de movimiento y así se me moveria y no es el caso, quiero colorearla. de b/n a color pero que sea una transición, gracias y disculpa si me equivoqué de subforo.

[albert84]

Como seria quitar el guión y capitalizar el resto? con un ejemplo que lo he intentado hacer y no me funciona.

[caricatos]

Hola:

Lo de la capitalización, no es más que poner la letra que sigue al guión a mayúsculas (siempre lo he visto como capitalizar)... por ejemplo, background-image pasa a ser con javascript backgroundImage (solo considera el cambio entre "con guión" o "sin guión")

Y lo de color o blanco y negro, no puedo ayudarte porque no lo he usado nunca, pero recuerdo que había un filtro en explorer y nada estándar en el resto... espero que otros que sepan del tema, se acerquen a responder.

Saludos

[albert84]

Gracias, lo de capitalizar ya lo encontre, esperamos a ver si alguien sabe como hacerlo, gracias.

[albert84]

Pensando pensando, he llegado a una posible solución aquí os la dejo, por si a alguien le interesa

Como punto negativo es que si entras y sales del div muchas veces seguidas antes de terminar la transición hace el efecto tantas veces como entras y salgas

He utilizado jQuery

$("#divByN").hover(function(){
$(this).fadeOut();
})
$("#divColor").mouseleave(function(){
$('#divByN').fadeIn();
})


<div id="divColor">
<div id="divByN">
</div>
</div>

El estilo del css, divColor y divByN, tienen que tener el mismo ancho y alto. Y la misma imagen de fondo, una en color y la otra en ByN.