没有引入deferred机制，其余流程都有了

////////////

//创建动画缓动对象 //

////////////

function Tween(value, prop, animation) {

    this.elem    = animation.elem;

    this.prop    = prop;

    this.easing  = "swing"; //动画缓动算法

    this.options = animation.options;

    //获取初始值

    this.start   = this.now = this.get();

    //动画最终值

    this.end     = value;

    //单位

    this.unit    = "px"

}

function getStyles(elem) {

    return elem.ownerDocument.defaultView.getComputedStyle(elem, null);

};

function swing(p) {

    return 0.5 - Math.cos(p * Math.PI) / ;

}

Tween.prototype = {

    //获取元素的当前属性

    get: function() {

        var computed = getStyles(this.elem);

        var ret = computed.getPropertyValue(this.prop) || computed[this.prop];

        return parseFloat(ret);

    },

    //运行动画

    run:function(percent){

        var eased

        //根据缓动算法改变percent

        this.pos = eased = swing(percent);

        //获取具体的改变坐标值

        this.now = (this.end - this.start) * eased + this.start;

        //最终改变坐标

        this.elem.style[this.prop] = this.now + "px";

        return this;

    }

}

////////

//动画类 //

////////

function Animation(elem, properties, options){

    //动画对象

    var animation = {

        elem            : elem,

        props           : properties,

        originalOptions : options,

        options         : options,

        startTime       : Animation.fxNow || createFxNow(),//动画开始时间

        tweens          : [] //存放每个属性的缓动对象，用于动画

    }

    //生成属性对应的动画算法对象

    for (var k in properties) {

        // tweens保存每一个属性对应的缓动控制对象

        animation.tweens.push( new Tween(properties[k], k, animation) )

    }

    //动画状态

    var stopped;

    //动画的定时器调用包装器

    var tick = function() {

        if (stopped) {

            return false;

        }

        //动画时间算法

        var currentTime = Animation.fxNow || createFxNow

            //运动时间递减

            remaining = Math.max(, animation.startTime + animation.options.duration - currentTime),

            temp = remaining / animation.options.duration || ,

            percent =  - temp;

        var index = ,

            length = animation.tweens.length;

        //执行动画改变

        for (; index < length; index++) {

            //percent改变值

            animation.tweens[index].run(percent);

        }

        //是否继续，还是停止

        if (percent <=  && length) {

            return remaining;

        } else {

            //停止

            return false;

        }

    }

    tick.elem = elem;

    tick.anim = animation

    Animation.fx.timer(tick)

}    

//创建开始时间

function createFxNow() {

    setTimeout(function() {

        Animation.fxNow = undefined;

    });

    return (Animation.fxNow = Date.now());

}

//用于定时器调用

Animation.timers =[]

Animation.fx = {

    //开始动画队列

    timer: function(timer) {

        Animation.timers.push(timer);

        if (timer()) {

            //开始执行动画

            Animation.fx.start();

        } else {

            Animation.timers.pop();

        }

    },

    //开始循环

    start: function() {

        if (!Animation.timerId) {

            Animation.timerId = setInterval(Animation.fx.tick, );

        }

    },

    //停止循环

    stop:function(){

        clearInterval(Animation.timerId);

        Animation.timerId = null;

    },

    //循环的的检测

    tick: function() {

        var timer,

            i = ,

            timers = Animation.timers;

        Animation.fxNow = Date.now();

        for (; i < timers.length; i++) {

            timer = timers[i];

            if (!timer() && timers[i] === timer) {

                //如果完成了就删除这个动画

                timers.splice(i--, );

            }

        }

        if (!timers.length) {

            Animation.fx.stop();

        }

        Animation.fxNow = undefined;

    }

}

测试：

<!doctype html>

<button id="one">jQuery动画的模拟实现:left:50</button> <button id="two">jQuery动画的模拟实现:left:500</button><ul id="book" style="background:red;opacity:1;position: relative; left: 300px;width:200px;height:100px;display:inline;" data-mce-style="background: red; opacity: 1; position: relative; left: 300px; width: 200px; height: 100px; display: inline;"></ul><script type="mce-text/javascript">

var book = document.getElementById('book');
var $book = $('#book');
var i = 10
while(i){
$book.append("<li>11</li>")
i--;
}

////////////
//创建动画缓动对象 //
////////////
function Tween(value, prop, animation) {
this.elem = animation.elem;
this.prop = prop;
this.easing = "swing"; //动画缓动算法
this.options = animation.options;
//获取初始值
this.start = this.now = this.get();
//动画最终值
this.end = value;
//单位
this.unit = "px"
}

function getStyles(elem) {
return elem.ownerDocument.defaultView.getComputedStyle(elem, null);
};

function swing(p) {
return 0.5 - Math.cos(p * Math.PI) / 2;
}

Tween.prototype = {
//获取元素的当前属性
get: function() {
var computed = getStyles(this.elem);
var ret = computed.getPropertyValue(this.prop) || computed[this.prop];
return parseFloat(ret);
},
//运行动画
run:function(percent){
var eased
//根据缓动算法改变percent
this.pos = eased = swing(percent);
//获取具体的改变坐标值
this.now = (this.end - this.start) * eased + this.start;
//最终改变坐标
this.elem.style[this.prop] = this.now + "px";
return this;
}
}

////////
//动画类 //
////////
function Animation(elem, properties, options){
//动画对象
var animation = {
elem : elem,
props : properties,
originalOptions : options,
options : options,
startTime : Animation.fxNow || createFxNow(),//动画开始时间
tweens : [] //存放每个属性的缓动对象，用于动画
}

//生成属性对应的动画算法对象
for (var k in properties) {
// tweens保存每一个属性对应的缓动控制对象
animation.tweens.push( new Tween(properties[k], k, animation) )
}

//动画状态
var stopped;
//动画的定时器调用包装器
var tick = function() {
if (stopped) {
return false;
}
//动画时间算法
var currentTime = Animation.fxNow || createFxNow
//运动时间递减
remaining = Math.max(0, animation.startTime + animation.options.duration - currentTime),
temp = remaining / animation.options.duration || 0,
percent = 1 - temp;

var index = 0,
length = animation.tweens.length;

//执行动画改变
for (; index < length; index++) {
//percent改变值
animation.tweens[index].run(percent);
}

//是否继续，还是停止
if (percent <= 1 && length) {
return remaining;
} else {
//停止
return false;
}

}
tick.elem = elem;
tick.anim = animation

Animation.fx.timer(tick)
}

//创建开始时间
function createFxNow() {
setTimeout(function() {
Animation.fxNow = undefined;
});
return (Animation.fxNow = Date.now());
}

//用于定时器调用
Animation.timers =[]

Animation.fx = {
//开始动画队列
timer: function(timer) {
Animation.timers.push(timer);
if (timer()) {
//开始执行动画
Animation.fx.start();
} else {
Animation.timers.pop();
}
},
//开始循环
start: function() {
if (!Animation.timerId) {
Animation.timerId = setInterval(Animation.fx.tick, 13);
}
},
//停止循环
stop:function(){
clearInterval(Animation.timerId);
Animation.timerId = null;
},
//循环的的检测
tick: function() {
var timer,
i = 0,
timers = Animation.timers;

Animation.fxNow = Date.now();

for (; i < timers.length; i++) {
timer = timers[i];
if (!timer() && timers[i] === timer) {
//如果完成了就删除这个动画
timers.splice(i--, 1);
}
}

if (!timers.length) {
Animation.fx.stop();
}
Animation.fxNow = undefined;
}
}

$("#one").click(function(){
Animation(book, {
left: '50'
}, {
duration: 2000
})
});

$("#two").click(function() {
Animation(book, {
left: '500'
}, {
duration: 2000
})
});

</script>

jQuery动画的实现的更多相关文章

  1. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  2. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  3. jquery动画，基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

  4. 让网站动起来！12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  5. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  6. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  7. jQuery动画特效笔记

    show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...

  8. Velocity – 另外一款加速的 jQuery 动画插件

    Velocity 是一款 jQuery 插件,重新实现了 $.animate() 方法,提供更高的性能(比 CSS 动画还更快),同时包括一些新的功能,以改进动画工作流程.Velocity 除了包括所 ...

  9. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

随机推荐

  1. ACM: FZU 2105 Digits Count - 位运算的线段树【黑科技福利】

     FZU 2105  Digits Count Time Limit:10000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...

  2. android开发中使不同的listview同时联动

    在做一个Android程序时,需要在一个屏幕上显示两个不同的listview,开始用< linearlayout>包裹这两个listview在<ScrollView >设置时, ...

  3. Python2 基本数据结构源码解析

    Python2 基本数据结构源码解析 Contents 0x00. Preface 0x01. PyObject 0x01. PyIntObject 0x02. PyFloatObject 0x04. ...

  4. Java面向对象课程小结

    1.什么是对象?什么是类? 类和对象的关系 定义类的方法 方法五要素 new关键字 引用类型变量的赋值 null和nullException null大小写的区别 2.方法 重载和重写 构造 方法,带 ...

  5. 安卓中的Model-View-Presenter模式介绍

    转载自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0425/2782.html 英文原文:Introduction to M ...

  6. JS 怎么控制某个div的滚动条滚动到顶部？ （已解决）

    获取这个元素,然后设置它的滚动条的位置为初始位置(0,0). document.getElementById(..).scrollTop = 0;

  7. 【TJOI&HEOI2016】【Bzoj4551】树

    这道题是可以用树链剖分来做的,但其实有比它更加简单的做法--并查集. 可以想到,这类题的一种常见做法是离线处理,先全部读入,再从后往前处理,每次遇到标记操作,就把这个点的标记次数减一,到零以后就把这个 ...

  8. Weblogic反序列化漏洞补丁更新解决方案

    Weblogic反序列化漏洞的解决方案基于网上给的方案有两种: 第一种方案如下 使用SerialKiller替换进行序列化操作的ObjectInputStream类; 在不影响业务的情况下,临时删除掉 ...

  9. linux 上安装redis

    下载地址:http://redis.io/download,下载最新文档版本. 本教程使用的最新文档版本为 2.8.17,下载并安装: $ wget http://download.redis.io/ ...

  10. FMX保存JPG格式的Stream

    刚刚看以前的笔记,估计这个用的人很少 var surf:TBitmapSurface; astream:TmemoryStream; begin surf:=TbitmapSurface.Create ...