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

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

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

六种不同的.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.sucaiq.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.sucaiq.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.sucaiq.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.sucaiq.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.sucaiq.com/">Website</a></p>	
</div>

<div class="boxgrid peek">
    <a href="http://www.sucaiq.com/"><img src="images/birss.jpg"/></a>
    <a href="http://www.sucaiq.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});
});