animate实现6种不同切换遮罩层方法

收藏

分享一款图片多种不同遮罩层动画效果，当鼠标悬浮在图片上方，遮罩层会以不同动画animate来显示描述内容。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

六种不同的.boxgrid图片和遮罩层代码

<div class="boxgrid captionfull">
    <img src="images/jareck.jpg"/>
    <div class="cover boxcaption">
        <h3>Jarek Kubicki</h3>
        <p>Artist<br/><a href="http://www.erdangjiade.com/">More Work</a></p>
    </div>		
</div>

<div class="boxgrid caption">
    <img src="images/kamil.jpg"/>
    <div class="cover boxcaption">
        <h3>Kamil Smala</h3>
        <p>Artist<br/><a href="http://www.erdangjiade.com/">More Work</a></p>
    </div>
</div>

<div class="boxgrid slideright">
    <img class="cover" src="images/martin.jpg"/>
    <h3>Martin Stranka</h3>
    <p>Photographer<br/><a href="http://www.erdangjiade.com/">More Work</a></p>
</div>

<div class="boxgrid thecombo">
    <img class="cover" src="images/florian.jpg"/>
    <h3>Florian Nicolle</h3>
    <p>Graphic Designer<br/><a href="http://www.erdangjiade.com/">More Work</a></p>
</div>

<div class="boxgrid slidedown">
    <img class="cover" src="images/nonsense.jpg"/>
    <h3>The Nonsense Society</h3>
    <p>Art, Music, Word<br/><a href="http://www.erdangjiade.com/">Website</a></p>	
</div>

<div class="boxgrid peek">
    <a href="http://www.erdangjiade.com/"><img src="images/birss.jpg"/></a>
    <a href="http://www.erdangjiade.com/"><img class="cover" src="images/buildinternet.jpg"/></a>
</div>

//Vertical Sliding
$('.boxgrid.slidedown').hover(function() {
    $(".cover", this).stop().animate({top: '-260px'}, {queue: false, duration: 300});
}, function() {
    $(".cover", this).stop().animate({top: '0px'}, {queue: false, duration: 300});
});

//Horizontal Sliding
$('.boxgrid.slideright').hover(function() {
    $(".cover", this).stop().animate({left: '325px'}, {queue: false, duration: 300});
}, function() {
    $(".cover", this).stop().animate({left: '0px'}, {queue: false, duration: 300});
});

//Diagnal Sliding
$('.boxgrid.thecombo').hover(function() {
    $(".cover", this).stop().animate({top: '260px', left: '325px'}, {queue: false, duration: 300});
}, function() {
    $(".cover", this).stop().animate({top: '0px', left: '0px'}, {queue: false, duration: 300});
});

//Partial Sliding (Only show some of background)
$('.boxgrid.peek').hover(function() {
    $(".cover", this).stop().animate({top: '90px'}, {queue: false, duration: 160});
}, function() {
    $(".cover", this).stop().animate({top: '0px'}, {queue: false, duration: 160});
});

//Full Caption Sliding (Hidden to Visible)
$('.boxgrid.captionfull').hover(function() {
    $(".cover", this).stop().animate({top: '160px'}, {queue: false, duration: 160});
}, function() {
    $(".cover", this).stop().animate({top: '260px'}, {queue: false, duration: 160});
});

//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function() {
    $(".cover", this).stop().animate({top: '160px'}, {queue: false, duration: 160});
}, function() {
    $(".cover", this).stop().animate({top: '220px'}, {queue: false, duration: 160});
});