Javascript JSTween库已损坏_Javascript_Jquery_Jstween

Javascript JSTween库已损坏

javascript jquery

Javascript JSTween库已损坏,javascript,jquery,jstween,Javascript,Jquery,Jstween,JSTween库似乎没有执行从库教程中提取的简单动画。使用以下代码，警报框将在分配的1秒持续时间后显示，但不会出现动画我一定是把图书馆设置错了，但我看不出有什么问题 <html> <head> <style type="text/css"> #box { width: 16px; height: 16px; } </style> <script type="text/javascript" src="jquery-1

JSTween库似乎没有执行从库教程中提取的简单动画。使用以下代码，警报框将在分配的1秒持续时间后显示，但不会出现动画

我一定是把图书馆设置错了，但我看不出有什么问题

<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>


#盒子
{ 
宽度：16px；
高度：16px；
}
函数animate（）
{
$（'盒子'）.tween（{
宽度：{
开始：16，
站位:200,，
时间:0,，
单位：'px'，
持续时间：1，
效果：'easeInOut'，
onStop:function（）{alert（'Done！'）；}
}
}).play（）；
}

其他信息：在10.7.5上使用Safari。代码在Chrome或Firefox中也不起作用。

对于将来可能阅读此文章的任何人，我发现了一个问题：CSS元素#box需要位置：相对作为一个属性，否则默认情况下浏览器将保留元素。

对于将来可能阅读此内容的任何人，我发现了问题：CSS元素#框需要

位置：相对

作为一个属性，否则默认情况下浏览器将保留元素。

尝试记录

$（'#box'）。tween

，可以吗？@Cherniv:如果您的意思是添加一个console.log，如下所示：

函数animate（）{console.log（$（'#box'）。tween（{width:{start:16，stop:200，time:0，units:'px'，duration:1，effect:'easeInOut'onStop:function（）{alert（'Done！'）；}}}.play（）；}

控制台中的输出如下：[

尝试记录

$（'#box'））.tween

，可以吗？@Cherniv:如果你的意思是像这样添加一个console.log:

函数animate（）{console.log（$（'#box'））.tween（{宽度：{开始：16，停止：200，时间：0，单位：'px'，持续时间：1，效果：'easeInOut'在顶部：函数（）{警报（'Done！'）；}}}.play（））；}

控制台中的输出如下：[