使用javascript滑动div

Question

I wanted to write a javascript code that will slide a div in specific direction, distance and in some given time. I wrote this small script. but doesn't work at all. Instead browser gets slow. No change in position is visible. Can someone tell me how to achieve the result ? I know there are many ready made libraries that can do this easily. But I just wanted to give it a try.

<script type="text/javascript" language="javascript">
    var element = '';
    var slidePerMS = '';
    function slideIt(ele, direction, distance, slideDuration){
        element = ele;
        var i=0;
        slidePerMS = distance / (slideDuration*1000);
        for(i=0; i<3000; i++){
            setTimeout("changePosition()",1);
    }
}
function changePosition(){              
    var currElement = document.getElementById(element);
    currElement.style.left = "'"+slidePerMS+"px'";
}
</script>

Answer 1

SOO many things wrong with that code it's not even funny... Let's see...

1. You are trying to render a 1,000 FPS animation. This is simply impossible for a browser.
2. You are passing a string as parameter to setTimeout , which is as evil as eval .
3. You set slidePerMS once but never change it after, resulting in the div being moved to the exact same spot over and over.
4. You are setting the style with extra quotes inside - do you put quotes in a CSS file?

That's to name but a few. Try this instead:

<script type="text/javascript" language="javascript"> 
function slideIt(elem, direction, distance, slideDuration){ 
    var elmt = document.getElementById(elem),
        i=0, step = distance / (slideDuration*20),
        stepper = setInterval(function() {
            i = Math.min(distance,i+step);
            elmt.style.left = i+'px';
            if( i == distance) clearInterval(stepper);
        },50);
}
</script>

Answer 2

You have many problems.

You are treating setTimeout as if it was sleep . Don't do that. It isn't like sleep at all, it runs a function after a given period of time, but doesn't pause the execution of anything else.

This means you just hammer the function repeatedly 3000 times, which is what is locking up the browser.

Instead of using a for loop, you should be using setInterval .

Don't pass a string to setInterval (or setTimeout ), it gets evaled, which is slow and hard to debug, and it breaks scope. Pass a function instead.

Inside changePosition you are trying to use a variable called slidePerMS , which is undefined because it is defined in the scope of slideIt .

You are also trying to set left to "'123px'" . You can't quote your values in CSS.

Get rid of both the ' s.

This is why you can't see any change. Invalid values are ignored in CSS.

Answer 3

My suggestion is that use CSS transition and transform properties to control direction , distance and slideDuration .

Just like what tiny-swiper does:

• https://github.com/joe223/tiny-swiper/blob/ec99307b486121dad8f6ceaac35dcdf808f76f05/src/index.js#L388

• https://github.com/joe223/tiny-swiper/blob/ec99307b486121dad8f6ceaac35dcdf808f76f05/src/index.js#L377