说明下原理：其实很简单，就是通过变化菜单的background-position实现的
建立如下html代码
- <b>Horizontal Menu</b>
- <ul id="hor">
- <li><a href="#" class="home">Home</a></li>
- <li><a href="#" class="download">Download</a></li>
- <li><a href="#" class="contact">Contact</a></li>
- </ul>
关键来看其js实现
- $('#hor li a').hover(
- function () {
- //将当前的高度取反
- height = $(this).height() * (-1);
- //通过调节backgroundPosition来达到动画效果，留意stop()，有兴趣可以去掉再试下，就明白这函数的作用
- $(this).stop().animate({'backgroundPosition':'(0 ' + height + ')'}, {duration:200});
- },
- function () {
- //将backgroundPosition值调回0
- $(this).stop().animate({'backgroundPosition':'(0 0)'}, {duration:200});
- }
- );
