您的位置:首页 > Web前端 > JQuery

基于jQuery的animate动画制作图片有弹性的下落

2018-01-18 12:07 891 查看
本人用jquery制作了一个图片下落的动画,添加了一点点弹性的效果,小伙伴们如果觉得不错,就拿走不谢哈,代码都是很简单的。如下:
1.html部分
<ul class="team">
<li>
<p><img src="images/programmer_icon.png" /></p>
<p>专业开发</p>
</li>
<li>
<p><img src="images/pragmatic_icon.png" /></p>
<p>项目务实</p>
</li>
<li>
<p><img src="images/God_icon.png" /></p>
<p>客户至上</p>
</li>
</ul>
2.css部分
.team{
/*margin-top: 60px;*/
margin-top: 0.7rem;
overflow: hidden;
}
.team li{
float: left;
/*width: 300px;
height: 270px;*/
width: 376px;
height: 318px;
background: url(../images/trans_bg.png)no-repeat;
background-size: 376px 318px;
/*margin: 20px 33px;*/
text-align: center;
/*box-shadow: 0px 0px 20px #ccc;
background: #fff;
border-radius: 8px;*/
font-size: 36px;
position: relative;
display: none;
}
.team li img{
width: 100px;
transition: all 0.6s;
}
.team li img:hover{
width: 100px;
transform: scale(1.2);
}
.team li p:first-of-type{
position: absolute;
top:-100px;
left: 0;
width: 100%;
height: 100px;
overflow: hidden;
}
.team li p:last-of-type{
margin-top: 185px;
}3.jQuery部分
$('.team li').eq(0).delay(100).fadeIn(600).end()
.eq(1).delay(600).fadeIn(600).end()
.eq(2).delay(1000).fadeIn(600);
$('.team li').eq(0).find("p").eq(0).stop().delay(1200).animate({
top: '85px'
}, "fast", function() {
$(this).animate({ top: '74px' }, 50, function() { $(this).animate({ top: '80px' }, 60, function() { $(this).animate({ top: '78px' }, 60, function() { $(this).animate({ top: '80px' }, 60) }) }) })
});
$('.team li').eq(1).find("p").eq(0).stop().delay(1700).animate({
top: '80px'
}, "fast", function() {
$(this).animate({ top: '74px' }, 50, function() { $(this).animate({ top: '80px' }, 60, function() { $(this).animate({ top: '78px' }, 60, function() { $(this).animate({ top: '80px' }, 60) }) }) })
});
$('.team li').eq(2).find("p").eq(0).stop().delay(2200).animate({
top: '80px'
}, "fast", function() {
$(this).animate({
top: '74px'
}, 50, function() {
$(this).animate({
top: '80px'
}, 60, function() {
$(this).animate({
top: '78px'
}, 60, function() {
$(this).animate({
top: '80px'
}, 60)
})
})
})
});jQuery代码部分有些冗余了,需要的小伙伴可以自己整理一下。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息