¿Cómo hicieron este efecto con jQuery?

[Hokuten]

Muy buenas,

Antes que nada aclarar que estoy aprendiendo jQuery y no se como hacer esto o si hay algún plugin ya hecho.

http://www.thinkfa.com/

Se trata del efecto que al posar el mouse sobre la flecha del slider el tamaño del div se incrementa lentamente, suavemente hasta llegar a un cierto ancho.

¿Cómo se hace eso? ¿Algún iluminado?

[maycolalvarez]

parece un plugin de slider

[Hokuten]

¿Alguna idea de como se hace?

[alexg88]

En esa página lo hacen usando transiciones CSS3 las cuales no están soportadas por todos los navegadores (IE)

Te dejo un ejemplo de como se haría usando jquery y jquery ui:

http://jsfiddle.net/alexg88/VQSvc/

Lo ideal sería usar CSS3 que va más rápido, pero mientras tanto.

[Hokuten]

Genio! Groso! esto si es una respuesta y de excelente calidad.

Muchas Gracias por el gran aporte, este era uno de los puntos para terminar un sitio! ¡Muchas Gracias Alex!

[Hokuten]

Alex por cierto una pregunta. ¿Cómo se lo aplico a varios elementos? lo modifique todo como clase pero no funciona... con Id si pero solo para un elemento.

[alexg88]

Te dejo un ejemplo, aunque como lo apliques depende de lo que quieras hacer:

http://jsfiddle.net/alexg88/wkgWw/

[Hokuten]

Muchas Gracias Alex! solo hay un error tiene dos veces class="lorem" class="lorem"

Por cierto el efecto funciona sin jQuery UI o se lo vincula para otra cosa?

Ahora el lio es con fancybox que de ninguna forma puedo implementarlo no sé por que... todo esta bien..

[alexg88]

jquery ui es necesario para el cambio de color en el animate, que no lo soporta por defecto sólo jquery.

[Hokuten]

Que suerte me ahorre 160kb en jQuery UI por que no me interesaba e background, sino el incremento progresivo del width =D

Nuevamente muchas gracias por la solución Alex.