jQuery从天而降的背景标题遮罩层

当鼠标悬浮在每一个图片上，标题背景图从上而下以动画方式显示。鼠标离开后，标题浮动层消失。这款动画遮罩层js代码很简单。

淘建站为您提供更多_图片代码_背景图_遮罩层_背景图，在此特别感谢您对我们的支持与厚爱！

<ul class="artist">
    <li class="a1"><a href="http://www.sucaiq.com/"><img width="230" height="354" src="images/sucaiq.jpg" alt="张学友" /></a></li>
    <li class="a2">
        <img width="232" height="232" src="images/1.jpg" />
        <a class="cover" href="http://www.sucaiq.com/"><strong>张震岳</strong><br /><span>即将有5场演出</span><br />查看详情</a>
    </li>
    <li class="a3">
        <img width="110" height="110" src="images/2.jpg" />
        <a class="cover" href="http://www.sucaiq.com/"><strong>蔡琴</strong><br /><span>即将有5场演出</span><br />查看详情</a>
    </li>
    <li class="a4">
        <img width="110" height="110" src="images/3.jpg" />
        <a class="cover" href="http://www.sucaiq.com/"><strong>郑钧</strong><br /><span>即将有2场演出</span><br />查看详情</a>
    </li>
</ul>

$('.artist li').each(function() {
    $(this).find('.cover').css('top', -$(this).height());
    $(this).hover(function() {
        $(this).find('.cover').animate({
            'top': '0'
        }, 300);
    }, function() {
        $(this).find('.cover').animate({
            'top': $(this).height()
        }, {
            duration: 300,
            complete: function() {
                $(this).css('top', -$(this).parent('li').height())
            }
        });
    });
});