flytte element diagonalt

<ole>

Sparsomme info, men princippet er som følger:

<script type="text/JavaScript">
var speed = 10;
function pI(s) {
    return parseInt(s);
}
function anim(x,y) {
    var o = document.getElementById("ib");
    o.style.left = (pI(o.style.left)<(x-speed))? pI(o.style.left) + speed + "px" : x + "px";
    o.style.top = (pI(o.style.top)<(y-speed))? pI(o.style.top) + speed + "px" : y + "px";
    if (pI(o.style.left)!=x || pI(o.style.top)!=y) setTimeout("anim("+x+","+y+")",40);
}
</script>

<div id="ib" style="position:absolute;left:30px;top:50px;border:1px solid red">blabla</div>

/mvh
</bole>

super, Men den laver først et diagonalt ryk og derefter et vertikalt.
jeg brugte funktionen således:
<a href="#" onclick="anim(100,200)">asasa</a>   

Er der en chance for at rykket kan ske uden det sidste vertikale ryk

/Nielsen

OK, got it udskiftede || med && i denne:
if (pI(o.style.left)!=x || pI(o.style.top)!=y) setTimeout("anim("+x+","+y+")",40);

Thanks alot, det er nøjagtig hvad jeg skulle bruge
/Nielsen

Det går helt galt, hvis du udskifter || med &&. Så stopper animationen jo, når blot én af koordinaterne opfylder kravet  :)

Ja, det har du ret i, har du et forslag
/Nielsen

Ja, at du ikke retter det  :)

LOL, Men så opstår problemet som jeg beskriver i denne kommentar:
16/04-2003 15:07:26

Oooops ..... den havde jeg overset  :D
Prøv det her:

<script type="text/JavaScript">
var dX, dY, iX, iY, steps, numSteps = 100;
function pI(s) {
    return parseInt(s);
}
function anim(x,y) {
    var o = document.getElementById("ib");
    if (x && y) {
        iX = pI(o.style.left);
        iY = pI(o.style.top);
        dX = (x-iX)/numSteps;
        dY = (y-iY)/numSteps;
        steps = 0;
    }
    steps++;
    o.style.left = (dX*steps) + iX + "px";
    o.style.top = (dY*steps) + iY + "px";
    if (steps<numSteps) window.timer = setTimeout("anim()",20);
}
</script>

<div id="ib" style="position:absolute;left:30px;top:50px;border:1px solid red">blabla</div>

<button onclick="anim(500,300)">TEST</button>

... og selvfølgelig er der ingen grund til at blive ved med at kalde elementet:

var o, dX, dY, iX, iY, steps, numSteps = 100;

og:

function anim(x,y) {
    if (x && y) {
    o = document.getElementById("ib");
    iX = pI(o.style.left);
    iY = pI(o.style.top);
    dX = (x-iX)/numSteps;
    dY = (y-iY)/numSteps;
    steps = 0;
    }
    steps++;
    o.style.left = (dX*steps) + iX + "px";
    o.style.top = (dY*steps) + iY + "px";
    if (steps<numSteps) window.timer = setTimeout("anim()",20);
}

hov ... hvad skete der med indrykningen .... ?!??!!  :D

Exactly ;) thanks, answer please

lige et bonus spm..
Hvis jeg samtidig vil scalere elementet fra feks 200 til 20px i samme forløb som animationen sker, har du så endnu et bud.
:)

fik den løst simpelt:
o.style.width = parseInt(o.offsetWidth) - 4 + 'px';
o.style.height = parseInt(o.offsetHeight) - 4 + 'px';

:)

yups .... og da vi i forvejen har lavet et alias for parseInt(), kan du skrive:
  o.style.width = pI(o.offsetWidth) - 4 + 'px';
  o.style.height = pI(o.offsetHeight) - 4 + 'px';
/mvh

u right, men skal du aldrig ha points :)

Jamen, jeg har allerede fået, tak  ;o)
Udfor min post (16/04-2003 14:58:21) står der da i hvert fald, at jeg er blevet begavet med et passende antal points  :)
/mvh

ok jeg sover videre så...