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

来源:https://www.sucaihuo.com/js/841.html 2016-03-10 18:53浏览(2407) 收藏

分享一款图片多种不同遮罩层动画效果,当鼠标悬浮在图片上方,遮罩层会以不同动画animate来显示描述内容。
animate实现6种不同切换遮罩层方法
分类:图片代码 > 遮罩层 难易:中级
查看演示 下载资源 下载积分: 20 积分

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

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

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2