CODEWITHSUNDEEP
javascriptanimation
Xavier
Xavier

Reputation: 119

Basic JavaScript Animation

After looking through JavaScript animation tutorials and looking at other stack over flow posts. I'm wondering why this example does not work when I try to implement it myself. Even when copied verbatim the animation does not work. This is the version I created based off of the example code given. I very aware of the other examples available which contain more code yet this person seems to be using less and achieving the same result and advertising it as working code. I also know about CSS3 and how much easier it is to use, I'm just curious as to why this won't work. Thanks for reading.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation</title>
<style type="text/css">
.area {
    width: 300px;
    height: 300px;
    border-style: solid;
    border-width: 1px;
}

.block {
    width: 25px;
    height: 25px;
    background: #999;
}
</style>
<script>
function move(elem) {
    var left = 0;
    function frame() {
        left++; //update parameters
        elem.style.left = left + 'px'; //show frame
        if(left==100)
            clearInterval(id);
    }
    var id = setInterval(frame, 10); //draw every 10ms
}
</script>
</head>
<body>
    <div onclick="move(this.children[0])" class="area">
    <div class="block"></div>
</div>
</body>
</html>

Upvotes: 0

Views: 117

Answers (2)

Konstantin Dinev
Konstantin Dinev

Reputation: 34915

You need your block element to be relatively or absolutely positioned in order for the left attribute to work:

.block {
    position: relative;
    width: 25px;
    height: 25px;
    background: #999;
}

Upvotes: 3

megapctr
megapctr

Reputation: 961

The property left is active when the position property is anything but static (default). Switch to position: relative, or use margin-left instead of left.

Upvotes: 2

Related Questions