关于自定义animate方法错误问题

代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
#div1 { background:#aaa; width:188px; height:188px; position:absolute; top:10px; left:110px; }
#div2 { background:#aaa; width:188px; height:188px; position:absolute; top:310px; left:110px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easing-1.3.pack.js"></script>
<script type="text/javascript"></script>
</head><body>
<div id='div1'>我是一个div</div>
<div id='div2'>我是另一个div</div>
<button onclick="stop()">停止</button>
<button onclick="cont()">继续后面的动画</button>
<script type="text/javascript">
var timers = [];
var timerId;$.fn.extend({
myAnimate: function(property, duration, easing, callback) {
var operate = jQuery.getOpt(duration, easing, callback);
$(this).queue(function() {
var elem = this;
$.each(property, function(name, value){
var fx = new FX(elem, operate, name);
var start = parseInt($(elem).css(name));
var end = value;
fx.custom(start, end);
})
})
return this;
}
})function FX(elem, options, name){
this.elem = elem;
this.options = options;
this.name = name;
}FX.prototype.custom = function(from, to){
this.startTime = jQuery.now();
this.start = from;
this.end = to;
timers.push(this);
FX.tick();
}FX.prototype.step = function(){
var t = jQuery.now();
var nowPos;
if(t > this.startTime + this.options.duration){
nowPos = this.end;
this.options.callback.call(this.elem);
this.stop();
} else {
var n = t - this.startTime;
var state = n / this.options.duration;
var pos = jQuery.easing[this.options.easing](state, n,0,1,this.options.duration);
nowPos = this.start + ((this.end - this.start)*pos);
}
this.update(nowPos, this.name);
}FX.prototype.stop = function(){
for(var i=timers.length - 1; i >=0; i--){
if(timers[i] === this){
timers.splice(i, 1);
}
}
}FX.prototype.update = function(value, name){
this.elem.style[name] = value;
}FX.tick = function(){
if(timerId) return;
var self = this;
timerId = setInterval(function(){
for(var i=0, c; c=timers[i++];){
c.step();
}
if(!timers.length){
FX.stop();
}
}, 13);
}FX.stop = function(){
clearInterval(timerId);
timerId = null;
}jQuery.getOpt = function(duration, easing, callback) {
var obj = {
'duration': duration,
'easing': easing
}
obj.callback = function() {
callback && callback();
$(this).dequeue();
}
return obj;
}$.fn.stop = function(){
for (var i = timers.length - 1; i>=0; i--){
if(timers[i].elem === this[0]) {
timers[i].stop();
}
}
}$('#div1').myAnimate({'top': 500}, 'swing').myAnimate({'top': 100}, 'swing').myAnimate({'left': 500}, 'swing').myAnimate({'top': 500}, 500, 'swing');
$('#div2').myAnimate({'left': 1000}, 1000, 'swing'); 
function stop() {
$('#div1').stop();
}function cont() {
$('#div1').dequeue();
}</script>
</body>
</html>
代码来源http://wenku.baidu.com/view/215b9af79e31433239689329.html
提示错误：TypeError: jQuery.easing[this.options.easing] is not a function
66行，请问是什么原因啊？

解决方案 »

  1.   

    在本地运行需要jquery-easing-1.3.pack.js
      

  2.   

    哪位大神能解释下啊，特别是解释下jquery是如何实现queue的，实现的原理是什么
      

  3.   

    $('#div1').myAnimate({'top': 500}, 'swing').myAnimate({'top': 100}, 'swing').myAnimate({'left': 500}, 'swing').myAnimate({'top': 500}, 500, 'swing');其他代码不知道，你前面3个调用myAnimate没有少了duration参数，导致传递easing参数丢失，那么就是undefined，jQuery.easing当然没有undefined这种效果，报错了
      

  4.   

    大神能解释下特别是解释下jquery是如何实现queue的，实现的原理是什么