动画js功能 [英] animation js function

问题描述

看看我制作的这个新JS函数。它非常简单，但是非常强大。您可以为任何样式表数字值设置动画（左上角

宽度高度已经过测试），并且适用于％和px值。

适用于ie和firefox。


参数

styleType = top |离开|宽度|高度

toNumber =风格的新值

然后你传递尽可能多的ID。


var oldMoveTimeOut = new Array（）;

函数resizeObects（styleType，toNumber）{

for（var loopCount = 2; loopCount< =（resizeObects.arguments.length

- 1）; loopCount ++）

{


window.clearTimeout（oldMoveTimeOut [resizeObects.arguments [loopCount]]）;


var objectInQuestion =

document.getElementById（resizeObects.arguments [loopCount]）;

var currentStyleValue =

eval（" new Number（new String（document.getElementById（''" +

resizeObects.arguments [loopCount] +

"''）。 style。" + styleType +

" .replace（''px''，''''）。replace（'''''，''''）））;" ）;

var d = currentStyleValue - toNumber;

if（currentStyleValue< toNumber）

d = toNumber - currentS tyleValue;

d = Math.round（d / 5）;

if（d< 1）

d = 1;

if（currentStyleValue< toNumber）

newValue = new String（currentStyleValue + d）;

else

newValue = new String（currentStyleValue - d）;

eval（" document.getElementById（''" +

resizeObects.arguments [loopCount] +"''）。style。" +

styleType +" =

new String（document.getElementById（'' " +

resizeObects.arguments [loopCount] +"''）。style。" +

styleType +"）。replace（''" + currentStyleValue +

"''，''" + newValue +"''）"）;

if（newValue！= toNumber）

oldMoveTimeOut [resizeObects.arguments [loopCount]] =

window.setTimeout（" resizeObects（''" +

styleType +"''， " + toNumber +"，''" +

resizeObects.arguments [loopCount] +"''）;"，1）

}

}

解决方案

Robert Skidmore写道：

看看我制作的这个新的JS函数。


如果您使用

格式化适当考虑Usenet发布软件的行为，那么这项任务本身就不那么繁重了，

特别是关于自动换行。

它非常简单但非常强大。


简单而强大都是相当主观的评估。

你可以设置任何样式表数值的动画（左上角
宽度高度已经过测试），适用于％
和px值。


但不能工作，例如em单位？

适用于ie和firefox。


有5个不同类别的现代，或多或少的DOM标准，动态，
可视化网络浏览器，以及40多种可编写脚本的浏览器，能够标记

某些东西，因为适用于两者......并不是一个很大的成就。

而且一个重要的考虑因素是它如何失败它会在什么地方失败？

不起作用'。

参数
styleType = top |离开|宽度| height
toNumber =风格的新值
然后你传入尽可能多的id。


还有一个重要的警告，即由

标识的元素需要将这些ID设置为最初的相关CSS属性

作为内联样式属性或先前使用脚本分配。

var oldMoveTimeOut = new Array（）;


简单性的一个考虑因素是任何代码使用的全局

变量/标识符的数量。与

全局函数名称关联的那个几乎是不可避免的，但是第二个用于保存

存储阵列至少使该元素的复杂性增加一倍。 b $ b脚本。这意味着在部署中，有必要将两个

全局项目保持在一起（从两个意义上讲，它们都在其使用的b $ b b中定义）并且它使潜力翻倍用于命名冲突。

函数resizeObects（styleType，toNumber）{
for（var loopCount = 2; loopCount< =
（resizeObects.arguments.length - 1）; loopCount ++ ）


访问 - 参数 - 作为函数对象的属性是

已弃用，并且不必要，因为它始终可以对待

标识符 - 参数 - 作为函数局部变量，当然 -

arguments.length - 比 - resizeObects.arguments.length简单 - 。


理论上，在循环上使用预增量而不是后增量也更有效。因为它对循环没有实际的区别，即使它在任何给定javascript实现的任何

上都没有更高效的操作，因此它极不可能

效率较低 - ++ loopCount - 可能是最好的

选择。

{


window.clearTimeout（oldMoveTimeOut [resizeObects.arguments [loopCount]]）;


第一次调用此函数时，至少值为 -

oldMoveTimeOut [resizeObects.arguments [loopCount]] - 将是

undefined。 - clearTimeout - 方法被描述为取消使用--setTimeout创建的

计时器 - 使用从 -

setTimeout - call返回的值作为其参数。未定义的参数 -

clearTimeout - 必须具有潜在的不可预测的结果。即使

对于用于测试的几个浏览器显示是安全的，也不能在跨浏览器代码中认为是安全的。


最好测试一下 -

oldMoveTimeOut [arguments [loopCount]]的值 - 并且在未定义的时候不要尝试取消

计时器（或者取消定时器后显式将该值设置为

null（以避免取消同一个计时器

两次）。

var objectInQuestion =
document.getElementById（resizeObects.arguments [loopCount]）;


这是一个有趣的代码行，因为它检索对

DOM元素的引用并将其分配给局部变量，这可能是一个很好的

想法，然后剩下的代码从不使用这个引用，使它成为无意义的行动。

var currentStyleValue =
eval （" new Number（new String（document.getElementById（''"
+ resizeObects.arguments [loopCount] +
"''）。style。" + styleType +
" .replace（''px''，''''）。replace（'''''，''''）））;"）;


您刚刚使用了 - eval - 函数，因此任何简单的声明

和功率现在都无效。


对于所有常见的情况 - 滥用 - 似乎是正确的 - 滥用

优越的替代品只不过是使用括号表示法属性

访问者代替某些点-notation属性访问器，以及

不使用 - eval - 。以上可以完全替换为： -


var currentStyleValue =

新数字（

new String（

document.getElementById（

resizeObects.arguments [loopCount]

）.style [styleType] .replace（''px''，''''） .replace（''％''，''''）

）

）;


但是给出了参考已经检索到了元素

并且绝对没有必要使用字符串原始值

从final - replace - 调用返回来创建一个String对象，

使用String对象作为Number构造函数的参数将

键入 - 将String对象转换回字符串原语。所以帽子

整件事可以缩短为： -


var currentStyleValue =

新号码（

objectInQuestion.style [styleType] .replace（''px''，''''）。replace（'''''，''''）

）;


但是，没有充分的理由在这里使用Number对象，

因此将字符串原语类型转换为数字原语将是

足够了，并且因为动画功能应该尽可能快，如果它们能够很好地工作，那么类型转换方法应该是最快的可用的b / b
，这是一元加运算符： -


var currentStyleValue =

+ objectInQuestion.style [styleType] .replace（''px''，''''） .replace（''％''，''''）;


哪一个都比

快得多（比快20倍）原始 - 评估 - 滥用，但可以更快，而不是

重新使用 - objectInQuestion - 引用它可以

为元素's' - style - 对象分配一个变量和

避免重新解析引用该对象。 IE： -


var styleObj = objectInQuestion.style;


- 代码中的早期版本然后： -

var currentStyleValue =

+ styleObj [styleType] .replace（''px''，''''）。replace（'''''，''''）;

var d = currentStyleValue - toNumber;


这是使用Number对象来表示当前样式'

值开始看起来像个坏主意的地方，因为它现在需要

类型转换为数字原语以评估此

表达式并将结果分配给-d - 。

if（currentStyleValue< toNumber）
d = toNumber - currentStyleValue;


比较和减法操作还需要将数字转换为数字原语的数字

对象。

d = Math .round（d / 5）;
if（d< 1）
d = 1;
if（currentStyleValue< toNumber）
newValue = new String（currentStyleValue + d ）;
其他
newValue = new String（currentStyleValue - d）;


再一次，绝对没有理由在这里创建一个String对象，

，因为它会隐含地将数值转换为

a字符串原语在创建String对象时，然后

String对象将被类型转换回该字符串原语

使用它时代码后期。

eval（" document.getElementById（''" +
resizeObects.arguments [loopCount] +"''）。style。" +
styleType +" =
new String（document.getElementById（''" +
resizeObects.arguments [loopCount] +"''）。style。" +
styleType +"）。replace（''" + currentStyleValue +
"''，''" + newValue +"''）"）;


这第二次 - 评估 - 滥用与第一次一样毫无价值。直接

替换是： -


document.getElementById（

resizeObects.arguments [loopCount]

）.style [styleType] =

new String（

document.getElementById（

resizeObects.arguments [loopCount]

）.style [styleType] .replace（currentStyleValue，newValue）

）;


- 最佳替换更像是： -


styleObj [styleType] =

styleObj [styleType] .replace（currentStyleValue，newValue）;

if（newValue！= toNumber）


考虑到CSS长度值可能是非整数而且

后果>
调整当前值的值将四舍五入为整数。

这意味着当CSS值为非整数值时，

函数将超调 - toNumber - ，继续执行并尝试在o中补偿
pposite方向，下冲，再次执行，

超调，等等。将代码置于无限循环

oldMoveTimeOut [resizeObects.arguments [loopCount] =


作为 - oldMoveTimeOut - 对象被指派新成员使用

属性名称不能作为数组索引限定，并且从未用作

这样的分析，如果它被创建为对象会更好

而不是数组。

window.setTimeout（" resizeObects（''" +
styleType +"''，" + toNumber +"，''' " +
resizeObects.arguments [loopCount] +"''）;"，1）
}
}

同样的情况是，此函数将为一个CSS值设置动画，但是

不能同时为同一个元素上的两个值设置动画。所以

定位元素可以垂直或水平移动但不是对角线
。


理查德。

" Richard Cornford" <日***** @ litotes.demon.co.uk>写道：

理论上，在循环
计数器上使用预增量而不是后增量也更有效。


只是在理论上更安全地将脚本包装在

<！ - 和 - >中。

Javascript不是C，甚至C编译器都知道在表达结果未被使用的情况下识别

后增量，并且

将其转换为一个普通的增量。


Opera和Firefox显示两者之间没有区别，只需要一个简单的增量循环。

IE6确实显示了一个微小的差异（超过500000增量20-50毫秒），

，但这是如此之小，以至于完全不相关（转到1000000

回合做了很多更大的差异 - 因为IE弹出一个警告

脚本花了太长时间:)。

因为它没有实际区别

我们可以就效率问题达成一致意见。


然而，i ++似乎是人们写的东西，所以很可能它是

也是他们期望阅读的内容。这使得使用i ++的代码更具可读性，所以我更喜欢使用它。


以牺牲可读性为代价追逐小额奖励，

没有确定需要它（如果它在80％的

代码中占用了20％的运行时间，那是不值得的），是早熟

优化。而且，正如Knuth所说，是万恶之源。

/ L

-

Lasse Reichstein Nielsen - lr*@hotpop.com

DHTML死亡颜色：< URL：http：//www.infimum.dk/HTML/rasterTriangleDOM .html>

''没有判断的信仰只会降低神灵的精神。''

Richard Cornford写道：

Robert Skidmore写道：
[...]


还有几点...

function resizeObects（styleType，toNumber）{
for（var loopCount = 2; loopCount< =
（resizeObects.arguments.length - 1）; loopCount ++）

访问 - 参数 - 作为函数对象的属性被弃用，并且是不必要的，因为它始终可以将
标识符 - 参数 - 视为函数局部变量，当然 -
arguments.leng th - 比resizeObects.arguments.length更简单。

在理论上使用循环
计数器上的预增量而不是后增量也更有效。因为它对循环没有任何实际的区别，即使它在任何给定的javascript实现上都没有更高效的操作，因此它的效率极低是不太可能的make - ++ loopCount - 可能是更好的选择。

值得添加重复调用arguments.length是

效率低，特别是当它的值可能很大时，所以指示使用

局部变量。


OP的使用< =运算符需要修改arguments.length返回的值

，添加不必要的代码：


for（var loopCount = 2，len = arguments.length ; loopCount< len; ++ i）{


或者更好：


for（var arg，loopCount = 1;（arg = arguments [++ loopCount]）;）{

或者作为一个while循环：


var arg，loopCount = 1;

while（（arg = arguments [++ loopCount]））{

{

window.clearTimeout（oldMoveTimeOut [resizeObects.arguments [loopCount]]）;

在第一次调用此函数时，至少， -
oldMoveTimeOut [resizeObects.arguments [loopCount]]的值将是未定义的。 - clearTimeout - 方法被描述为取消使用--setTimeout创建的
计时器 - 使用从 -
setTimeout - call返回的值作为其参数。未定义的参数 -
clearTimeout - 必须具有潜在的不可预测的结果。即使对于用于测试的两对浏览器显示安全，它也不能被认为是跨浏览器代码的安全。

测试其价值会更好 -
oldMoveTimeOut [arguments [loopCount]] - 并且在未定义（或为null）时不尝试取消
定时器，并在取消定时器后将该值显式设置为
null（至避免取消相同的计时器两次）。

基于以上所述：


oldMoveTimeOut [arg]& ;&安培; clearTimeout（oldMoveTimeOut [参数]）;

VAR objectInQuestion =
的document.getElementById（resizeObects.arguments [loopCount]） ;

这是一个有趣的代码行，因为它检索对
DOM元素的引用并将其分配给局部变量，这可能是一个很好的
想法，然后其余代码从不使用此引用，使其成为无意义的行为。

继续：


var objectInQuestion = document.getElementById（arg）;

[...]

var currentStyleValue =
+ styleObj [styleType] .replace （''px''，''''）。replace（'''''，''''）;

或：


var currentStyleValue = + styleObj [styleType] .replace（/ [^ \d。] / g，''''）;

将允许修剪任何长度的单位。


[...]

-

Rob

Take a look at this new JS function I made. It is really simple but
very powerful. You can animate any stylesheet numeric value (top left
width height have been tested), and works for both % and px values.
Works in both ie and firefox.

Parameters
styleType = top | left | width | height
toNumber = the new value of the style
then you pass in as many ids as you would like.

var oldMoveTimeOut = new Array();
function resizeObects(styleType, toNumber){
for (var loopCount = 2; loopCount <= (resizeObects.arguments.length
- 1); loopCount++)
{

window.clearTimeout(oldMoveTimeOut[resizeObects.arguments[loopCount]]);

var objectInQuestion =
document.getElementById(resizeObects.arguments[loopCount]);
var currentStyleValue =
eval("new Number(new String(document.getElementById(''" +
resizeObects.arguments[loopCount] +
"'').style." + styleType +
".replace(''px'','''').replace(''%'', '''')));");
var d = currentStyleValue - toNumber;
if (currentStyleValue < toNumber)
d = toNumber - currentStyleValue;
d = Math.round(d / 5);
if (d < 1)
d = 1;
if (currentStyleValue < toNumber)
newValue = new String(currentStyleValue + d);
else
newValue = new String(currentStyleValue - d);
eval("document.getElementById(''" +
resizeObects.arguments[loopCount] + "'').style." +
styleType + " =
new String(document.getElementById(''" +
resizeObects.arguments[loopCount] + "'').style." +
styleType + ").replace(''" + currentStyleValue +
"'',''" + newValue + "'')");
if (newValue != toNumber)
oldMoveTimeOut[resizeObects.arguments[loopCount]] =
window.setTimeout("resizeObects(''" +
styleType + "'', " + toNumber + ", ''" +
resizeObects.arguments[loopCount] + "'');",1)
}
}

解决方案

Robert Skidmore wrote:

Take a look at this new JS function I made.
A task that would have been less onerous if you had formatted with
proper regard for the behaviour of your Usenet posting software,
particularly with regard to automatic line wrapping.
It is really simple but very powerful.
Simple and powerful are both rather subjective assessments.
You can animate any stylesheet numeric value (top left
width height have been tested), and works for both %
and px values.
But not work in, for example em units?
Works in both ie and firefox.
With 5 distinct classes of modern, more or less DOM standard, dynamic,
visual web browsers, and 40 odd scriptable browsers, being able to label
something as "works on both ... " is not that much of an achievement.
And quite an important consideration would be how it fails where it
doesn''t ''work''.
Parameters
styleType = top | left | width | height
toNumber = the new value of the style
then you pass in as many ids as you would like.
There is also the significant caveat that the elements identified by
those IDs will need to have their initial pertinent CSS properties set
as inline style attributes or previously assigned with scripts.
var oldMoveTimeOut = new Array();
One of the considerations of simplicity would be the number of global
variables/Identifiers used by any code. The one associated with the
global function name is almost unavoidable but a second to hold a
storage array doubles the complexity of at least that aspect of the
script. It means that in deployment it is necessary to keep the two
global items together (in the sense of both being defined in their
context of use) and it doubles the potential for naming collisions.
function resizeObects(styleType, toNumber){
for (var loopCount = 2; loopCount <=
(resizeObects.arguments.length - 1); loopCount++)
Accessing the - arguments - as a property of the function object is
deprecated, and unnecessary as it is always possible to treat the
Identifier - arguments - as a function local variable, and of course -
arguments.length - is simpler than - resizeObects.arguments.length -.

It is also theoretically more efficient to use pre-increment on the loop
counter instead of post-increment. As it makes no practical difference
to the - for - loop, even if it is not a more efficient operation on any
given javascript implementation the fact that it is extremely unlikely
to be less efficient makes - ++loopCount - probably the preferable
choice.
{

window.clearTimeout(oldMoveTimeOut[resizeObects.arguments[loopCount]]);

On the first call to this function, at the very least, the value of -
oldMoveTimeOut[resizeObects.arguments[loopCount]] - is going to be
undefined. The - clearTimeout - method is described as cancelling a
timer created with - setTimeout - using the value returned from the -
setTimeout - call as its argument. The undefined argument to -
clearTimeout - must have potentially unpredictable results. Even if
shown to be safe on the couple of browers used for testing it cannot be
considered safe in cross-browser code.

It would be better to test the value of -
oldMoveTimeOut[arguments[loopCount]] - and not attempt to cancel the
timer when it is undefined (or null) and explicitly set that value to
null after the timer is cancelled (to avoid cancelling the same timer
twice).
var objectInQuestion =
document.getElementById(resizeObects.arguments[loopCount]);
This is an interesting line of code as it retrieves a reference to the
DOM Element and assigns it to a local variable, which is probably a good
idea, and then the rest of the code never uses this reference, making it
a pointless action.
var currentStyleValue =
eval("new Number(new String(document.getElementById(''"
+ resizeObects.arguments[loopCount] +
"'').style." + styleType +
".replace(''px'','''').replace(''%'', '''')));");
You have just used the - eval - function so any claims for simplicity
and power are now void.

As appears to be true of all the common cases of - eval - abuse the
superior alternative is no more than using bracket notation property
accessors in place of some dot-notation property accessors, and the just
not using - eval -. The above can be entirely replaced with:-

var currentStyleValue =
new Number(
new String(
document.getElementById(
resizeObects.arguments[loopCount]
).style[styleType].replace(''px'','''').replace(''%'', '''')
)
);

But given that the reference to the element has already been retrieved
and there is absolute no point in using the string primitive value that
is returned from the final - replace - call to create a String object,
as using the String object as an argument to the Number constructor will
type-convert the String object back into a string primitive. So hat
whole thing could be shorted to:-

var currentStyleValue =
new Number(
objectInQuestion.style[styleType].replace(''px'','''').replace(''%'', '''')
);

However, there is no good reason for using a Number object here either,
so type-converting the string primitive into a number primitive would be
sufficient, and as animation functions should be as quick as possible if
they are to work well the type-converting method should probably be the
fastest available, which is the unary plus operator:-

var currentStyleValue =
+objectInQuestion.style[styleType].replace(''px'','''').replace(''%'', '''');

Which will all be considerably quicker (more then 20 times faster) than
the original - eval - abuse, but could be quicker still as instead of
re-using the - objectInQuestion - reference it would be possible to
assign a reference the element''s - style - object to a variable and
avoid re-resolving the reference to that object. I.E:-

var styleObj = objectInQuestion.style;

- earlier in the code and then:-

var currentStyleValue =
+styleObj[styleType].replace(''px'','''').replace(''%'', '''');
var d = currentStyleValue - toNumber;
This is where using a Number object to represent the current style''s
value starts to look like a bad idea as it now needs to be
type-converted into a number primitive in order to evaluate this
expression and assign the result to - d -.
if (currentStyleValue < toNumber)
d = toNumber - currentStyleValue;
The comparison and subtraction operations also requi8re the Number
object to be type-converted into a number primitive.
d = Math.round(d / 5);
if (d < 1)
d = 1;
if (currentStyleValue < toNumber)
newValue = new String(currentStyleValue + d);
else
newValue = new String(currentStyleValue - d);
Again, there is absolutely no reason for creating a String object here,
as it will implicitly involve the numeric value being type-converted to
a string primitive during the creation of the String object, and then
the String object will be type-converted back into that string primitive
when it is used late in the code.
eval("document.getElementById(''" +
resizeObects.arguments[loopCount] + "'').style." +
styleType + " =
new String(document.getElementById(''" +
resizeObects.arguments[loopCount] + "'').style." +
styleType + ").replace(''" + currentStyleValue +
"'',''" + newValue + "'')");
This second - eval - abuse is as worthless as the first. The direct
replacement is:-

document.getElementById(
resizeObects.arguments[loopCount]
).style[styleType] =
new String(
document.getElementById(
resizeObects.arguments[loopCount]
).style[styleType].replace(currentStyleValue, newValue)
);

- and the optimum replacement would be more like:-

styleObj[styleType] =
styleObj[styleType].replace(currentStyleValue, newValue);
if (newValue != toNumber)
This not-equals test is going to have some potentially problematic
consequences given that CSS length values may be non-integers and the
values by which the current value is adjusted is rounded to an integer.
It means that when the CSS value is stet to a non-integer value the
function will overshoot - toNumber -, keep executing and try to
compensate in the opposite direction, undershoot, execute again,
overshoot, and so on. Putting the code into an indefinite loop.
oldMoveTimeOut[resizeObects.arguments[loopCount]] =
As the - oldMoveTimeOut - object is being assigned new members using
property names that cannot qualify as array indexes, and never used as
an assay as such, it would be better if it was created as an Object
instead of an Array.
window.setTimeout("resizeObects(''" +
styleType + "'', " + toNumber + ", ''" +
resizeObects.arguments[loopCount] + "'');",1)
}
}

It is also the case that this function will animate one CSS value but
cannot animate two values on the same element at the same time. So a
positioned element may be moved vertically or horizontally but not
diagonally.

Richard.

"Richard Cornford" <Ri*****@litotes.demon.co.uk> writes:

It is also theoretically more efficient to use pre-increment on the loop
counter instead of post-increment.
Only in the same sense as it is theoretically safer to wrap scripts in
<!-- and -->.
Javascript is not C, and even C compilers know to recognize an
post-increment where the result of the expression isn''t used, and
turn it into a plain increment.

Opera and Firefox show no difference between the two in timing a
simple loop of increments.
IE6 does show a minuscule difference (20-50 ms over 500000 increments),
but that is so small as to be completely irrelevant (going to 1000000
rounds made a much bigger difference - because IE popped up a warning
that the script was taking too long :).
As it makes no practical difference

That we can agree on, when it comes to efficiency.

However, i++ seems to be what people write, so it is likely that it is
also what they expect to read. That makes code using i++ more
readable, so I would prefer using that.

Chasing small efficiency bonuses at the expense of readability, and
without having identified a need for it (if it''s in the 80% of your
code that takes 20% of the runtime, it''s not worth it), is premature
optimization. And that, as Knuth says, is the root of all evil.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
''Faith without judgement merely degrades the spirit divine.''

Richard Cornford wrote:

Robert Skidmore wrote: [...]

A couple more points...

function resizeObects(styleType, toNumber){
for (var loopCount = 2; loopCount <=
(resizeObects.arguments.length - 1); loopCount++)

Accessing the - arguments - as a property of the function object is
deprecated, and unnecessary as it is always possible to treat the
Identifier - arguments - as a function local variable, and of course -
arguments.length - is simpler than - resizeObects.arguments.length -.

It is also theoretically more efficient to use pre-increment on the loop
counter instead of post-increment. As it makes no practical difference
to the - for - loop, even if it is not a more efficient operation on any
given javascript implementation the fact that it is extremely unlikely
to be less efficient makes - ++loopCount - probably the preferable
choice.

It''s worth adding that repetitively calling arguments.length is
inefficient, particularly when its value may be large, so the use of a
local variable is indicated.

The OP''s use of the <= operator necessitates modifying the value
returned by arguments.length, adding unnecessary code:

for (var loopCount=2, len=arguments.length; loopCount<len; ++i){

or maybe better:

for (var arg, loopCount=1; (arg = arguments[++loopCount]); ){
Or as a while loop:

var arg, loopCount=1;
while ( (arg = arguments[++loopCount]) ){

{

window.clearTimeout(oldMoveTimeOut[resizeObects.arguments[loopCount]]);

On the first call to this function, at the very least, the value of -
oldMoveTimeOut[resizeObects.arguments[loopCount]] - is going to be
undefined. The - clearTimeout - method is described as cancelling a
timer created with - setTimeout - using the value returned from the -
setTimeout - call as its argument. The undefined argument to -
clearTimeout - must have potentially unpredictable results. Even if
shown to be safe on the couple of browers used for testing it cannot be
considered safe in cross-browser code.

It would be better to test the value of -
oldMoveTimeOut[arguments[loopCount]] - and not attempt to cancel the
timer when it is undefined (or null) and explicitly set that value to
null after the timer is cancelled (to avoid cancelling the same timer
twice).

Based on the above:

oldMoveTimeOut[arg] && clearTimeout(oldMoveTimeOut[arg]);

var objectInQuestion =
document.getElementById(resizeObects.arguments[loopCount]);

This is an interesting line of code as it retrieves a reference to the
DOM Element and assigns it to a local variable, which is probably a good
idea, and then the rest of the code never uses this reference, making it
a pointless action.

Following on:

var objectInQuestion = document.getElementById(arg);
[...]
var currentStyleValue =
+styleObj[styleType].replace(''px'','''').replace(''%'', '''');

Or:

var currentStyleValue = +styleObj[styleType].replace(/[^\d.]/g,'''');
will allow for any length unit to be trimmed.

[...]
--
Rob

这篇关于动画js功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！