jquery - 如何使用 JQuery 缓动菜单栏上的图像 "uncover"

Question

我有一个菜单栏:

http://jsfiddle.net/EyFPB/8/

菜单上有一张图片，我想向下滑动以发现它:

.green{background:#6AA63B;
   background-image: url('http://images.dailytech.com/frontpage/fp__army_fish.jpg');
   background-position:bottom;
   background-repeat:no-repeat;}

虽然使用这样的 CSS，当菜单​​折叠并向下滑动时图像是可见的。我希望效果显示纯色 block (示例中为绿色)并向下滑动以显示图像。

我可以用 JQuery animate 做这个吗？

Answer 1

简单的CSS解决方案，在.green中添加一个background-position:0 50px;。

jsFiddle