悬停/翻转文本淡出效果

时间:2012-05-20 22:37:06

标签: jquery hover fade slide caption

我希望了解如何创建这种效果:

http://www.thesartorialist.com/category/men/

(当该网站悬停在图片上时 - 链接/阳离子从侧面滑入,您可以“输入”照片)。

我想知道的是背景和链接栏如何淡入,然后它如何知道您输入的图像的哪一面?

我可以看到有夸张的CSS,它会带来黑色渐变图像叠加但不会更多。

非常感谢提前..

亚历

1 个答案:

答案 0 :(得分:1)

如果栏杆滑入和滑出,请考虑使用 - http://docs.jquery.com/UI/Effects/Slide

为了获得它应该进入的一面,你可以做一些原始的东西。那是, 为了悬停在每个图像上,您可以从事件对象获取鼠标位置作为event.pageX,然后您可以随时找到图像的哪一侧位于该点,因为您具有图像的宽度,以及offsetLeft图像。

获得鼠标入口点后,通过使用jquery设置栏的css然后将栏从所需方向滑入,将栏移到那一侧。

祝你好运。