•  01-06-2022
  •  | 
  •  

Question

The JSTween library doesn't seem to perform a simple animation pulled from the library's tutorial. Using the following code, the alert box will show up after the allotted 1 second duration, but no animation will take place.

I must have set up the library wrong somehow, but I can't see the problem.

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

Additional info: using Safari on 10.7.5. Code does not work in Chrome or Firefox either.

Was it helpful?

Solution

For anyone who may read this in the future, I discovered the problem: the CSS element #box needs position: relative; as an attribute, otherwise the browser will hold the element in place by default.

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