I want to show a image moving from right top corner to left bottom corner in simple html

Question

onmouseover() I am calling this function

function move_arrow() {

        document.getElementById('arrow1').style.display = "block";
        j = 100;
        for (var i = 1000; i > 260; i--) {
            document.getElementById('arrow1').style.left = i + 'px';
            document.getElementById('arrow1').style.top = j + 'px';
            if (j < 440) {
                j = j + .5;
            }
         //alert();      

        }
    }

With alert its shows image moving to desired position otherwise its not. I know with alert it gets sufficient time to execute the function. What can be the right solution for this in simple html and javascript which works in all browsers.

Answer 1

You may use setInterval for example:

function move_arrow() {
    document.getElementById('arrow1').style.display = "block";
    j = 100;
    i = 1000;
    var intervalId = setInterval(
        function() {
            i--;
            document.getElementById('arrow1').style.left = i + 'px';
            document.getElementById('arrow1').style.top = j + 'px';
            if (j < 440) {
                j = j + .5;
            }

            if (i < 240)
                clearInterval(intervalId); //switch off setInterval
        }, 
        10 //execute this function every 10ms
    );
}