没有引入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. 热浪[TYVJ1031]

    描述 德克萨斯纯朴的民眾们这个夏天正在遭受巨大的热浪!!!他们的德克萨斯长角牛吃起来不错,可是他们并不是很擅长生產富含奶油的乳製品.Farmer John此时以先天下之忧而忧,后天下之乐而乐的精神,身 ...

  2. PHP用户注册与登录完整代码【4】

    login.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  3. JavaScript_js模拟键盘输入

    function fireKeyEvent(el, evtType, keyCode) { var evtObj; if (document.createEvent) { if (window.Key ...

  4. JAVA使用SAX解析XML文件

    在我的另一篇文章(http://www.cnblogs.com/anivia/p/5849712.html)中,通过一个例子介绍了使用DOM来解析XML文件,那么本篇文章通过相同的XML文件介绍如何使 ...

  5. tcpdump

    tcpdump tcp -i eth1 -t -s -c and dst port ! and src net -w ./target.cap (1)tcp: ip icmp arp rarp 和 t ...

  6. 数据库（SQL Server）管理数据库表~新奇之处

    说到“数据库”,我总有一种莫名的感觉,在刚刚接触到的数据库中就让我似懂非懂渡过着,于是思考着.于是在冷静的时空中让我回想到了很多的知识,不知你们是怎样过来的,真心希望我的这篇数据库总结能够让我们都有一 ...

  7. ubuntu 下emacs 配置

    (set-language-environment 'Chinese-GB) (set-keyboard-coding-system 'utf-8) (set-clipboard-coding-sys ...

  8. iphone 下滚动条卡顿解决办法

    -webkit-overflow-scrolling:touch; -webkit-text-size-adjust:none;

  9. Linq中使用反射实现--LINQ通用数据表绑定DataGrid控件的方法(原创)

    项目需求,因为项目中存在很多表,这些表的内容需要呈现给客户浏览．转载请注明出处 相信很多写过程序的设计者很容易的用以下方式实现 在SqlConnect ,DataSet 的方式,我们很轻松的可以通过S ...

  10. FAT32 FAT区__FAT表解析

    一. FAT 表概述 位置: 紧跟在文件系统的“保留区”之后 : 有两个数据结构完全相同的FAT(FAT,File Allocation Tbale 文件分配表)组成. 作用: FAT表项,描述文件系 ...