一直是按順序執行動畫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/ResetStyle.css"/>
<link rel="stylesheet" type="text/css" href="css/Styles.css"/>
<script src="js/jquery-2.1.4.min.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>
<script src="js/Ani.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>
</body>
</html>
$(document).ready(function(){
var container = $(".container");
var box = $(".box");
var buddy = $(".buddy");
var pop = $(".pop");
var open = $(".btn");
var close = $(".close");
var imgs = pop.find('img');
$.Velocity.RegisterEffect('slideUpIn',{
defaultDuration:500,
calls:[
[{opcity:[1 , 0],translateY:[0 , 100]}]
]
});
var seqInit = [{
elements:container,
properties:'slideUpIn',
options:{
delay:300
}
},{
elements:box,
properties:'slideUpIn',
options:{
}
},{
elements:buddy,
properties:'slideUpIn',
options:{
delay:60
}
}];
$.Velocity.RunSequence(seqInit);
})
2016-09-11
是我看了一半視頻沒看到后面:D
2016-08-25
看老師的講解，是按照動畫數組（如你這里的seqInit?）順序執行