基于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() {
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代码部分有些冗余了,需要的小伙伴可以自己整理一下。
相关文章推荐
- 基于animate和fullpage制作动画页面的总结
- jquery动画 -- 6.制作带鼠标和键盘引导功能的图片浏览器
- 基于Animate.css的jQuery动画特效插件
- 基于jQuery的鼠标悬停时放大图片的效果制作
- 一款基于jQuery制作的焦点图片局部场景图片切换的特效
- 基于jQuery的鼠标悬停时放大图片的效果制作
- 基于jquery的direction图片渐变动画效果
- 基于jQuery实现图片推拉门动画效果的两种方法
- 基于jQuery弹出层图片动画查看代码
- 【jQuery】调用animate()方法制作简单的动画效果
- 【jQuery】调用animate()方法制作移动位置的动画
- 基于jquery插件制作左右按钮与标题文字图片切换效果
- 基于animate.css的jQuery文字动画插件
- 淘宝首页 图片滑动切换效果 基于jQuery的animate方法实现
- Jquery鼠标控制图片轮播,animate()动画队列,stop()清除队列
- 基于jquery的图片懒加载js
- 基于UEditor的单独图片上传JQuery插件实现
- jquery中animate动画积累的解决方法
- 适应手机端的jQuery图片滑块动画
- 基于jQuery图片切换实现预加载插件,左右带控制