Javascript animation

[User908]

I'm currently working on a project which basically involves dragging the object, after which the script begins sorting the elements inside the parent DIV and when dropped, the dragged object should return to the "placeHolder's" position.

Well everything works fine, but the last part. I've used both setTimeout and setInterval to try to make smooth animation, but with no luck.
In case of setTimeout, the released object moves too slow, even when the delay is set to 10ms.
In case if setInterval, the object moves at first slowly then makes "jumps" to the target. I've already figured out the jumps part (why it makes jumps), but still can't make smooth animation.

Here is the code after the object is released

objT = parseInt(obj.style.top);
objL = parseInt(obj.style.left);

// in this case [b]def1[/b] is equal to =>
def1 = parseFloat(objT/objL);

//I'm dividing objT by objL to get the number which the script needs to move the object diagonally 

function clearing() {
					
	if ((objT>0 && objL>0) && objT>objL) {
				
			objT-=def1;
			obj.style.top = objT + "px";
			objL-=1;
			obj.style.left = objL + "px";
			
			if (parseInt(objL) <= 0) {obj.style.top = 0 + "px";}
	
	
	var t1 = setInterval(function() {
         
        clearing();
		
           if (objT===0 || objL===0) {
	     clearInterval(t1);}
		},500);
	
	
			
		}

So is there a way to make smooth transition using setInterval or a method alternative to setTimeout?
If anything is unclear about the code, I'll try to explain it more simply.

 

[xwb]

Is this for a specific browser or for any browser.

If it is for one of the later browsers (eg IE9, chrome) that support HTML5, you could use HTML canvas. There is something in there for moving shapes. The other thing is to try not clearing the screen. This causes flashing.

 

[User908]

It is for any browser.
I'm not currently using HTML5, just learning Javascript and prefer not using any framework/library.

What do you mean by "not clearing the screen"?
What is it supposed to do?
Could you please post an example or some link?

And thanks for the reply!

 

[xwb]

The problem with browsers is that there are 3 ways of doing graphics:
[ol 1]
[li]VML (IE 5.5 onwards)[/li]
[li]SVG all Mozilla based browsers (like Chrome, Firefox)[/li]
[li]Canvas on HTML5[/li]
[/ol]
The problem with animation is when the browser decides to do its refresh. Not sure if you can try an Ajax type idea. I'll see if I can dig up a working example from my stack of floppies.

 

[User908]

I'm trying to achieve this level of smoothness

http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=scriptaculous_13

but I can't.
Whenever I try increasing the value of pixels, let's say by 5 times

			objT=objT - (def1*5);
			obj.style.top = objT + "px";
			objL-=5;
			obj.style.left = objL + "px";

it moves faster but starts making "jumps" and the animation becomes "jerky".

even if the delay (setTimeout) is set to 1000/60 (60fps) (setTimeout(code..., 1000/60)).

When moving the object only horizontally or vertically, the animation is smooth, but not in the case when moving the object diagonally. (It has to go, for instance 1px left then N pixels top, and that makes the transition "jerky")

And again, thank you!

 

[User908]

I finally solved this problem!