Una mejor implementación de un intercambio de imágenes desvanecidas con javascript / jQuery
Esto es menos un problema o error específico, pero más una pregunta de implementación.
Primero quisiera decir que he pasado por muchos tutoriales de imágenes que se desvanecen y tengo una comprensión básica de los diferentes tipos. Espero que esto no se descarte junto con las otras cientos de preguntas sobre imágenes que se desvanecen.
Esto es básicamente lo que me gustaría: una imagen que se desvanece en otra imagen al pasar el mouse usando JavaScript y preferiblemente jQuery. Crearía dos imágenes: una llamada image.jpg y otra llamada image_o.jpg. Residirían en la misma carpeta.
Así es como se vería el marcado html:
<img class="imghover" src="image.jpg" />
El javascript me exigiría tener elimghover clase en todas las imágenes que quiero colocar. El script detectaría la segunda imagen llamadaimghover_o.jpg y úselo para la segunda imagen en la transición de desvanecimiento flotante.
No habría requerido CSS obackground-image para la transición.
Tendré varias de estas imágenes en una cuadrícula y todas necesitarán tener la transición de desvanecimiento. @or lo tanto, puede ver que no quiero crear una nueva clase CSS para cada imagen, o tener un script adicional y marcado html que se volverá engorroso.
Todo lo anterior se logra con estaDaniel Nolan script menos la transición de desvanecimiento. El script simplemente intercambia la imagen sin desvanecimiento, pero está configurado perfectamente con un código mínimo.
Entonces podría decir que solo quiero agregar una transición de desvanecimiento al script de reinversión de Daniel Nolan. ¿Es posible rehacer su script usando jQuery?
¿Es esto posible (con jQuery)?