Domanda
I don't understand how to use XUI tween. On the xui website, they give the following example code:
x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);
What is that supposed to do? I created a <div id="box"></div>
, ran the line of js code above, but nothing happened. Here's my complete code:
<!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>
Nothing happens...
Soluzione
So, XUI's tween seems to be a work in process. In fact, in the master branch code on GitHub you find:
// queued animations
/* wtf is this?
if (props instanceof Array) {
// animate each passing the next to the last callback to enqueue
props.forEach(function(a){
});
}
*/
So, in short, the array-based tween properties appear busted at the moment. In addition, XUI's tween
seems to be a little flakey when dealing with properties that are not currently set on the DOM element. (For example, setting the background-color
on a transparent element turns it black...rather than the intended color.)
That said, the single tween
and callback
work well on previously set properties. So take a look at the following (and excuse the inline 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>
Because #box
now has a css background-property
and left
position explicitly set, it is relatively easy to produce an effect similar to the one desired.
One-half second after the page loads, #box
should spend 2 seconds moving from left:500px
to left:100px
while turning the background color from white to green. Then, using the callback, #box
moves back to its original position at left:500px
--taking another 2 seconds to get back.
Obviously, this does not answer your exact question but for those (like me) who stumble upon this, it provides a workaround for the time being.