Home/ Questions/Q 6885949
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T05:41:54+00:00

I don’t understand how to use XUI tween. On the xui website, they give

  • 0

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0