jquery滑动图片显示标题遮罩层

本文演示了图片列表中，鼠标悬浮标题会以动画效果弹出，鼠标离开后，又会立即隐藏。这样的效果我们通常叫遮罩层滑动。

分类：图片代码 > 图片滑动难易：中级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

图片和遮罩层html代码

<div class='thumbnailWrapper'>
    <ul>
        <li> 
            <a href='http://www.sucaihuo.com/js/587.html' target='_blank'> <img src='images/1.jpg' alt='jQuery8种不同的懒加载loading效果' /> </a>
            <div class='caption'>
                <p class='captionInside'>jQuery8种不同的懒加载loading效果</p>
            </div>
        </li>
        <li> 
            <a href='http://www.sucaihuo.com/js/588.html' target='_blank'> <img src='images/2.jpg' alt='鼠标悬浮图片背景变黑白的Masonry瀑布流插件' /> </a>
            <div class='caption'>
                <p class='captionInside'>鼠标悬浮图片背景变黑白的Masonry瀑布流插件</p>
            </div>
        </li>
    </ul>
</div>

//当鼠标悬浮在图片...
$('.thumbnailWrapper ul li').hover(function() {
    $(this).find('img').stop().animate({
        /* increase the image width for the zoom effect*/
        width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
        /* we need to change the left and top position in order to 
         have the zoom effect, so we are moving them to a negative
         position of the half of the imgIncrease */
        left: thumbnail.imgIncrease / 2 * (-1),
        top: thumbnail.imgIncrease / 2 * (-1)
    }, {
        "duration": thumbnail.effectDuration,
        "queue": false
    });
    //show the caption using slideDown event
    $(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
}, function() { //鼠标离开
    //find the image and animate it...
    $(this).find('img').animate({
        /* get it back to original size (zoom out) */
        width: thumbnail.imgWidth,
        /* get left and top positions back to normal */
        left: 0,
        top: 0

    }, thumbnail.effectDuration);
    //hide the caption using slideUp event
    $(this).find('.caption').slideUp(thumbnail.effectDuration);
});