Javascript Smooth Glide?

I want to be开发者_如何转开发 able to move my element, El1, from (30,40) to (30,30) in 1000 milliseconds in a smooth animation. Is it even possible?

If you are not familiar to jQuery and if you don't want to use it and increase your page size by about 50kb just for some movements, I suggest you to use one of my functions:

function smooth(x, max){
return Math.floor((Math.sin((x/max*Math.PI)-(Math.PI/2))+1)*max/2);
}

and You need a code to move that element, something like this:

function process(LI){
    LI = LI || Config.From;
    LI++;
    Left = smooth(LI, Config.To)
    Config.Element.style.left = Left + 'px'
    if (LI < Config.To)
    setTimeout ("process("+LI+")", 10);
}

Config = {
Element: document.getElementById('El1'),
From: 0,
To: 400
};

process();

Try looking at the jquery libraries the animate function is exactly what you are looking for, and easy to implement.

Jquery is at http://jquery.com/

and the animate function specifically is at http://api.jquery.com/animate/

your code will look something like this

$('El1').animate({top: "-10px"}), 1000);

$("#moveme").animate({
   top: "30px"
}, 1000);

Make sure there's an element with id="moveme" and css position: absolute