jquery - 如何使用 JQuery 缓动来“发现”菜单栏上的图像

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，当菜单​​折叠并向下滑动时，图像是可见的。我希望效果显示纯色块（示例中为绿色）并向下滑动以显示图像。

我可以用 JQuery animate 做到这一点吗？

Answer 1

简单的 CSS 解决方案，添加background-position:0 50px;到.green.

jsFiddle

Answer 2

Figured it out.

You need to set a custom .subtext class for each button:

.subtextGreen{
    height:100px;
    margin-top:-7px;
    background-image: url('../images/home-btn.jpg');
    background-position:bottom;
    background-repeat:no-repeat;
}

and then in the code:

            <li class="green">
                            <p><a href="default.aspx">Home</a></p>
                            <p class="subtextGreen"></p>
                        </li>