Question

我有一个菜单栏：

在菜单上有一个我想要向下滑动以揭开的图像：

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

使用这样的CSS，当菜单折叠并向下滑动时，图像可见。我希望效果显示纯色块（示例中为绿色），然后向下滑动以显示图像。

我可以使用JQuery动画制作吗？

Answer 1

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

<强> jsFiddle

Answer 2

想出来。

您需要为每个按钮设置自定义.subtext类：

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

然后在代码中：

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

如何使用JQuery缓动来“揭开”菜单栏上的图像

2 个答案: