slide to the right in javascript

Question

I am trying to animate a div to move to the right when I click its grandchild. However I am constantly running into a problem with the timing. My doubt is that I am not using the setTimeout function right. Could someone kindly see if they spot an error. I would prefer if my own function worked rather than using a jquery function as i have no prior experience in jquery

function sendrequest(element) {
    var element=element.parentNode.parentNode;
    var i=0;

    while(i<150) {
        right=i+"%";
        myVar=setTimeout(element.style.right=right,3000);
        i++;
    }
}

jQuery would be pretty easy to use with no prior experience. The documentation is quite good. — Allan Kimmer Jensen, Jan 28 '13 at 09:35

score 2 · Accepted Answer · answered Jan 28 '13 at 09:34

Yes you are incrementing synchronously before calling the async setTimeout. Here's how it can be done:

var element = element.parentNode.parentNode;
var i=0, myVar;
function sendrequest(){
    if (i < 150) {
       var right = i+"%";
       element.style.right = right;
       i++;
       myVar = setTimeout(sendrequest, 3000);
    }
}

score 0 · Answer 2 · answered Jan 28 '13 at 09:36

Please add a css style where you use TRANSLATE. so this would help you, rather than using setTimeOut, because it is basically system clock cycle which can give nasty results, so i would prefer that dont depend on it

simply use following format

    el.on('click', function(){
          document.getElementByid("#id").style = "xyz";

        })

and in CSS style sheet use something like this

         .xyz{translate-x://x position in pixels}

for more information please read about adding styles to elements and translate in CSS

May this help you

i dnt just need to move it to a certain position, i actually need the end user to see the animate effect as it moves away — Abhinav Joshi, Jan 28 '13 at 09:46

slide to the right in javascript

2 Answers2