JSTween 库损坏答案

【问题标题】：JSTween library brokenJSTween 库损坏
【发布时间】：2013-06-26 10:12:49
【问题描述】：

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>

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

【问题讨论】：

尝试登录$('#box').tween，可以吗？
@Cherniv：如果你的意思是添加这样的 console.log：function animate() { console.log($('#box').tween({ width:{ start: 16, stop: 200, time: 0, units: 'px', duration: 1, effect:'easeInOut' onStop: function(){ alert( 'Done!' ); } } }).play()); } 控制台中的输出是这样的：[<div id="box" style="width: 200px; "> <img src="image.png" onclick="animate()"> </div>

标签： javascript jquery jstween

【解决方案1】：

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

【讨论】：