•  23-02-2021
  •  | 
  •  

Question

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

Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top