使用Jquery进行翻转效果

0 html javascript php jquery

你能帮我用jquery制作翻转效果,我想做的是当有人将鼠标悬停在任何菜单项上时,文本向下滑动并消失,图片从上到下滑动到中心(例如,你可以看到这个效果在这里熊猫因为你可以看到图片从顶部向下滑,但文字没有滑下来,这不是想要的).

我知道它可以很容易地使用闪光灯,但我不希望我的菜单在闪存,因为这将是一个不好的做法.

你能告诉我在菜单HTML中我需要改变什么以及我应该使用什么jquery函数.

非常感谢你的帮助

PS这是我的菜单HTML,你可以在这里看到我的菜单

<ul class="nav">

<li class="active first"><a href="#" class="home">Home</a></li>
<li><a href="#" class="news">News</a></li>
<li><a href="#" class="offers">Special offers</a></li>
<li><a href="#" class="private">Private label</a></li>
<li><a href="#" class="locations">Locations</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="jobs">Jobs</a></li>
<li><a href="#" class="contact">Contact us</a></li>
<li><a href="#" class="mm">Multimedia</a></li>

</ul>
Run Code Online (Sandbox Code Playgroud)

菜单:

替代文字

小智 5

而不是为你做,我会提供一些地方开始寻找..

这是一个可以轻松修改为使用'翻转'而不是'点击'的示例:http://css-tricks.com/examples/MenuFader/

有关上述示例如何组合的详细信息(教程):http: //css-tricks.com/learning-jquery-fading-menu-replacing-content/

我通过在Google上搜索"jquery效果示例"找到了本教程:http://www.google.com/search?hl = en&q = jquery + effects&examples&btnG = Google + Search&aq = f&noq =并点击第一个和第二个链接.

祝你的Jquery项目好运.