简介 目录 评价 推荐
  • WendyGao_Yin 2021-03-05
    	<style>		
        	    .alis{width: 100px;height: 100px;background: #f0f;margin: 10px;position: relative;}		
        	    .alis1{left: 200px;opacity: 0;}		
        	    .alis3{left: 20px;opacity: 1;}	
    	</style>
    	<div class="alis alis1"></div>	
    	<div class="alis alis2"></div>	
    	<div class="alis alis3"></div>
    //js,回调函数和complete都可以实现动画的衔接
    $(".alis1").delay(1000).velocity({left: 0,opacity:1}, 1000,function(){
        $(".alis2").velocity({
            opacity: 0.5,
            left:"300px",
            scale:1.3
        }, {
        duration: 1000,
        complete:function(){
        $(".alis4").velocity("fadeIn", { duration: 1500 })
        .velocity("fadeOut", { delay: 500, duration: 1500 })
        }
        });
    });
    //三个属性都带s
    var mySequence = [		
        { elements: $(".alis4"), properties: { translateX: 100 }, options: { duration: 1000 } },		
        { elements: $(".alis5"), properties: { translateX: 200 }, options: { duration: 1000 } },		
        { elements: $(".alis6"), properties: { translateX: 300 }, options: { duration: 1000 } }	
    ];	
    $.Velocity.RunSequence(mySequence);
    
    //动画:http://shouce.jb51.net/velocity/command.html

    http://img3.mukewang.com/6041ed72000192b314700922.jpg

    运动最后的状态:

    http://img1.mukewang.com/6041ed8c00010fd908260883.jpg

    0赞 · 0采集
  • 雨落尘中碎_03948239 2018-01-23
    使用方法
    截图
    0赞 · 0采集
  • Tsukiis 2017-11-17
    sequenceQueue:false - 入场序列动画同时执行,true为依次执行(默认)
    截图
    0赞 · 0采集
  • Tsukiis 2017-11-17
    自定义动画函数
    截图
    0赞 · 0采集
  • web端 2017-07-13
    自定义动画
    截图
    0赞 · 0采集
  • 鸰0 2017-06-09
    opacity:0.0; 设置透明
    0赞 · 0采集
  • 鸰0 2017-06-09
    cursor:pointer 鼠标移上去变成手形 transition:background-color 0.2s 颜色渐变 0.2秒时间
    0赞 · 0采集
  • moocer9527 2017-05-25
    Velocity.js插件用于做动画的,不依赖jQuery
    截图
    0赞 · 0采集
  • 慕慕8253039 2017-05-25
    jquery动画在移动端卡顿,加载慢
    截图
    0赞 · 1采集
  • 慕慕8253039 2017-05-25
    velocity兼容ie8和安卓2.3,css3动画不兼容ie8,jquery是pc端的插件,在移动的性能不够好
    截图
    0赞 · 1采集
  • weibo_王艺鑫_36819_04297725 2017-04-10
    增加可读性
    截图
    0赞 · 0采集
  • qweqwe13123123 2016-12-12
    2.更完美的加载方式
    截图
    0赞 · 0采集
  • qweqwe13123123 2016-12-12
    1.嵌套式 complete 上一个动画执行完后执行函数。
    截图
    0赞 · 0采集
  • qweqwe13123123 2016-12-12
    应用 velocity 执行api duration 动画执行时间
    截图
    0赞 · 0采集
  • 你想要什么我都会给 2016-10-09
    ///
    截图
    0赞 · 1采集
  • 十亿燚 2016-06-16
    font family
    0赞 · 0采集
  • UFO2015 2016-06-13
    demo
    截图
    0赞 · 0采集
  • cyrus_0001 2016-05-17
    margin 为负值的时候,可以往回移动,这点很有用。
    0赞 · 0采集
  • cyrus_0001 2016-05-17
    在css中清除所有的默认border 和 padding。
    0赞 · 0采集
  • cyrus_0001 2016-05-17
    RegisterEffect和RegisterUI在表现上是一致的
    0赞 · 0采集
  • cyrus_0001 2016-05-17
    注意scaleX的大小写,以及RegisterEffect()方法的参数列表
    0赞 · 0采集
  • cyrus_0001 2016-05-17
    elements: $('div1')这里很容落掉#符号,要注意
    0赞 · 0采集
  • cyrus_0001 2016-05-17
    连续动画的示例中,有个知识点没有讲到,如果我们给div2 设置另外一个class,那么就会导致在UI上看不到div2,complete完成时触发的动画,就无法展示;不知道为什么这里只是设置个另外的class,就导致无法看到,是重叠了吗?可是换了个颜色仍旧无法展示。
    0赞 · 0采集
  • cyrus_0001 2016-05-17
    浏览器执行js,是顺序执行的,因此,js中使用html标签时,需要注意自己引用的标签是否在js引用之前,已经存在。
    0赞 · 0采集
  • cyrus_0001 2016-05-17
    重点要注意, js文件的引入顺序是很重要的,应该先引入jQuery文件,再引入velocity.js,最后引入自己的文件;
    0赞 · 0采集
  • cyrus_0001 2016-05-17
    演示了基本的成型作品的样式,有了基本的了解; 现实产品中大量的运用了动画效果; 实现动画的方式多种多样:css,js,flash等等。 本文将使用velocity.js实现动画效果。
    0赞 · 0采集
  • 慕码人6295517 2016-05-10
    左右晃动
    0赞 · 0采集
  • 天蓝色的鱼 2016-04-29
    velocity.js
    截图
    0赞 · 0采集
  • 跟往事干杯 2016-04-18
    velocity适合于序列动画场景;学习js插件找到例子,了解细节即可
    0赞 · 0采集
  • 跟往事干杯 2016-04-18
    作为一个动画框架,提供了很多自带的动画效果,也可以自己注册一些动画效果
    0赞 · 0采集
数据加载中...
开始学习 免费