一直是按顺序执行动画

来源:3-3 入场动画

MillerOs

2016-08-19 23:29

<!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">&times;</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);

})


写回答 关注

2回答

  • MillerOs
    2016-09-11 23:08:11

    是我看了一半视频没看到后面:D

  • 向建峰_Javan
    2016-08-25 10:14:13

    看老师的讲解,是按照动画数组(如你这里的seqInit )顺序执行

Velocity.js实现弹出式相框

超给力动画插件,动画从此信手拈来,从此网页变得生动起来

27005 学习 · 63 问题

查看课程

相似问题