Desenfoque de la imagen gradualmente usando jQuery

Question

Tengo una imagen y quiero establecer un desenfoque inicial. Ante alguna acción del usuario que deseo que la imagen disminuya, es borroso en cierta medida. ¿Existe algún complemento de jQuery que le permita manejar el radio de desenfoque o algo así?

He encontrado una jQuery API aquí http://www.pixastic.com/lib/docs/actions/blur/ Pero no creo que sea capaz de cambiar la imagen borrosa gradualmente.

Necesito ayuda, Por favor, sugiera ¿Qué debo hacer? ¿Hay algo más que pueda usar? Gracias por adelantado.

Answer 1

Cualquier javascript será solo del lado del cliente - la imagen estará disponible para ser vista claramente si el usuario deshabilita javascript o en el momento en que la imagen se cargó y el javascript no se ejecutó.

Si es imprescindible que la imagen solo se aclare cuando el usuario selecciona la respuesta correcta, sugiero tener imágenes de diferentes "borrosidad" en el servidor que se utilizan para reemplazar la imagen anterior.

Answer 2

Tener una mirada un tutorial: http://tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/

Utiliza StackBlur gradualmente a difuminar la imagen.

Answer 3

Puede. Cada vez que se llama a Pixastic.process(img, "blur");, la imagen se vuelve un poco más borrosa, por lo que solo es cuestión de activar ese método varias veces.

Ahora disminuyendo la visión borrosa será un poco más complicado, ya que (supongo) que implicará volver a una copia en caché "menos borrosa" de la imagen. Buena suerte con esto!