JSTween库破坏

JSTween库似乎没有从库的教程中执行一个简单的动画。使用以下代码，警报框将在分配的1秒时间后显示，但不会发生动画。JSTween库破坏

我一定设置了错误库，但我看不到问题。

<html> 
<head> 

<style type="text/css"> 
#box 
{ 
    width: 16px; 
    height: 16px; 
} 
</style> 

<script type="text/javascript" src="jquery-1.10.1.js"></script> 
<script type="text/javascript" src="jstween-1.1.js" ></script> 
<script type="text/javascript" src="jstween-1.1.min.js" ></script> 

<script type="text/javascript"> 
function animate() 
{ 
    $('#box').tween({ 
     width:{ 
     start: 16, 
     stop: 200, 
     time: 0, 
     units: 'px', 
     duration: 1, 
     effect:'easeInOut', 
     onStop: function(){ alert('Done!'); } 
     } 
    }).play(); 
} 
</script> 
</head> 

<body> 

<div id="box"> 
<img src="image.png" onClick="animate()" /> 
</div> 

</body> 
</html>

附加信息：在10.7.5上使用Safari。代码在Chrome或Firefox中都不起作用。

来源

2013-06-26 Adifex

尝试记录'$（'＃box'）。tween'，可以吗？ – Cherniv

@Cherniv：如果你的意思是加入一个像这样的的console.log： '功能动画（）{ 的console.log（$（ '＃箱'）吐温（{ 宽度：{ 启动：16，停车：200，时间：0，单位： 'PX'，时间：1，效果： 'easeInOut' 的onStop：函数（）{警报（ '！完成'）;} } }）玩（））; }' 控制台中的输出是这样的： [''

' – Adifex

对于任何可能在将来阅读此内容的人，我发现了这个问题：CSS元素#box需要position: relative;作为属性，否则浏览器将默认保存该元素。

来源

2013-07-04 02:23:18 Adifex

回答

相关问题