悬停/翻转文本淡入效果

Question

我正在寻找这种效果是如何产生的：

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

（当在该网站上将鼠标悬停在图像上时 - 链接/阳离子从您“输入”照片的一侧滑入）。

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

我可以看到有一些 CSS 用于显示黑色渐变图像叠加层，但不是很多。

提前非常感谢..

亚历克斯

Answer 1

对于滑入和滑出的栏，请考虑使用 -- http://docs.jquery.com/UI/Effects/Slide

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

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

祝你好运。