极棒的jquery动画切换引擎插件Velocity.js。
duration:时长 delay:动画延时时间
1：手动维护
2：complete:一层层嵌套
3：推荐
-----------------------------
没有想要的效果：
案例：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹出式相框</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/velocity.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/velocity.ui.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="box">
<img src="imgs/back.jpg" />
<img class="buddy" src="imgs/head.jpg" />
<div class="inner">
<h3>慕课网</h3>
<span>学习学习学习</span>
<div class="btn">查看课程</div>
</div>
</div>
<div class="pop">
<div class="close">×</div>
<h3>慕课网</h3>
<span>学习学习学习</span>
<img src="imgs/pic1.jpg" />
<img src="imgs/pic2.jpg" />
<img src="imgs/pic3.jpg" />
<img src="imgs/pic4.jpg" />
</div>
</div>
<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
}
.container{
width: 320px;
height: 430px;
border: 1px solid #ddd;
background: #fff;
margin: 10px auto;
}
.box{
position: relative;
z-index: 2;
}
.buddy{
position: absolute;
width: 96px;
height: 96px;
left: 50%;
top:213px;
border-radius:50% ;
margin-left:-48px ;
margin-top: -48px;
}
.inner{
margin-top: 66px;
text-align: center;
}
.inner span{
font-size: 14px;
color:#b4b4b4;
display: inline-block;
margin-top: 5px;
}
.btn{
width: 90%;
height: 45px;
line-height:45px;
margin-top:45px ;
background-color:#5677fc ;
color: #fff;
display: inline-block;
cursor:default;
transition:background-color 0.2s;
}
.btn:hover{
background-color:#ccc ;
}
.pop{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
}
.close{
position: absolute;
top: 0px;
right: 10px;
color: #999;
font-size: 24px;
font-family: helvetica;
cursor: pointer;
}
.close:hover{
color: #111;
}
.pop h3{
margin-top: 15px;
}
.pop span{
font-size: 12px;
color: #999;
display: block;
margin-bottom: 30px;
}
.pop img{
width: 125px;
height: 125px;
display: inline-block;
margin: 10px;
}
.container,.box,.pop,.buddy,.pop img{
opacity: 0.0;
}
new_file.js
(function($) {
var container = $(".container");
var box = $(".box");
var buddy = $(".buddy");
var pop = $(".pop");
var open = $(".btn");
var close = $(".close");
var imgs = pop.find('img');
//1 进
$.Velocity.RegisterUI('lx.slideUpIn', {
defaultDuration: 500,
calls: [
[{
opacity: [1, 0],
translateY: [0, 100]
}]
]
});
//2 退
$.Velocity.RegisterUI('lx.slideDownOut', {
defaultDuration: 300,
calls: [
[{
opacity: [0, 1],
translateY: [100, 0]
}]
]
});
//拉片弹出式3
$.Velocity.RegisterUI('lx.scaleIn', {
defaultDuration: 300,
calls: [
[{
opacity: [1, 0],
scale: [1, 0.3]
}]
]
});
//点击叉号4
$.Velocity.RegisterUI('lx.scaleOut', {
defaultDuration: 300,
calls: [
[{
opacity: [0, 1],
scale: [0.3, 1]
}]
]
});
//主进场1
var seqInit = [{
elements: container,
properties: 'lx.slideUpIn',
options: {
delay: 300
}
}, {
elements: box,
properties: 'lx.slideUpIn',
options: {
sequenceQueue:false
}
}, {
elements: buddy,
properties: 'lx.slideUpIn',
options: {
sequenceQueue:false,
delay: 60
}
}];
//点击按钮后2
var seqClixk =[{
elements: container,
properties: 'lx.slideDownOut',
options: {
delay: 300
}
}, {
elements: box,
properties: 'lx.slideDownOut',
options: {
sequenceQueue:false
}
}, {
elements: container,//背面1
properties: 'lx.slideUpIn'
},{
elements: pop,//背面盒子
properties: 'lx.slideUpIn',
options: {
sequenceQueue:false
}
},{
elements: imgs,
properties: 'lx.scaleIn'
}];
// 点击叉号后4
var seqClose =[{
elements: imgs,
properties: 'lx.scaleOut'
},{
elements: container,
properties: 'lx.slideDownOut',
options: {
delay: 300
}
}, {
elements: pop,
properties: 'lx.slideDownOut',
options: {
sequenceQueue:false
}
}, {
elements: container,
properties: 'lx.slideUpIn'
},{
elements: box,
properties: 'lx.slideUpIn',
options: {
sequenceQueue:false
}
}];
//事件绑定
$.Velocity.RunSequence(seqInit);
open.on('click',function(){
$.Velocity.RunSequence(seqClixk);
});
close.on('click',function(){
$.Velocity.RunSequence(seqClose);
});
-------总结
a动完B动
