如何使用XUI tween？
我不懂怎么用雪饼。在xui网站上，他们给出了以下示例代码：
x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);这是要做什么？我创建了一个<div id="box"></div>，运行了上面的js代码行，但是什么也没有发生。下面是我的完整代码：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="xui.min.js"></script>
<script type="text/javascript">
x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>什么都没发生。
回答 1
Stack Overflow用户
发布于 2011-12-02 23:02:50
因此，XUI的青少年似乎是一个正在进行的工作。实际上，在master branch code on GitHub中您可以找到：
// queued animations
/* wtf is this?
if (props instanceof Array) {
// animate each passing the next to the last callback to enqueue
props.forEach(function(a){
});
}
*/因此，简而言之，基于数组的补间属性目前似乎失败了。此外，在处理当前未在DOM元素上设置的属性时，XUI的tween似乎有点古怪。(例如，在透明元素上设置background-color会使该元素的颜色变得比预期颜色black...rather。)
也就是说，单个tween和callback在以前设置的属性上工作得很好。因此，请看一下以下内容(请原谅内联css)：
<html>
<head>
<script type="text/javascript" src="http://xuijs.com/downloads/xui-2.3.2.min.js"></script>
<script type="text/javascript">
x$.ready(function(){
setTimeout(function(){
x$('#box').tween({'left':'100px', 'background-color':'#339900', duration:2000}, function(){
x$('#box').tween({'left':'500px', duration:2000});
});
}, 500);
});
</script>
</head>
<body style="position:relative;">
<div id="box" style="position:absolute;top:50px;left:500px;width:100px;height:100px;background-color:#fff;border:1px solid #000;">the box</div>
</body>
</html>由于#box现在显式设置了css background-property和left位置，因此产生与所需效果类似的效果相对容易。
在页面加载半秒后，#box将花费2秒时间从left:500px移动到left:100px，同时将背景颜色从白色变为绿色。然后，使用回调，#box移回它在left:500px的原始位置--再花2秒返回。
显然，这并没有回答您的确切问题，但对于那些偶然发现这一点的人(比如我)，它暂时提供了一种变通方法。
https://stackoverflow.com/questions/8038977
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号