CODEWITHSUNDEEP
htmlcssanimation
An SO User
An SO User

Reputation: 24998

CSS transition happens only once on button click

What I am trying to make:

I am trying to make a button controlled animation where a small stick figure moves to the right or the left depending on which button is clicked.

Problem:

  • Animation happens only once
  • Applies only to right and down buttons

    • HTML: 

    <!DOCTYPE html>
<html>

<style>
    #stage{
        width: 100px;
        height: 100px;
        position: relative;
        border-style: dashed;
        border-color: gray;
        border-width: medium;
    }

    #actor{
        width: 13px;
        height: 15px;
        position: absolute;
        left: 0;
        top: 0;
        background-image: url("E:/Website Projects/man.PNG");

        -webkit-transition: all 2s ease-out 0s;
        -moz-transition: all 2s ease-out 0s;
        transition: all 2s ease-out 0s;
    }


</style>

<body>
    <div id="stage">
        <div id="actor"></div>
    </div>

    <div>
        <button class="control" id="top">TOP</button> <br>
        <button class="control" id="left">LEFT</button> <button class="control" id="right">RIGHT</button> <br>
        <button class="control" id="down">DOWN</button>
    </div>
</body>

<script>
    var maxWidth = 100;
    var maxHeight = 100;

    var top = document.querySelector("#top");
    var left = document.querySelector("#left");
    var right = document.querySelector("#right");
    var down = document.querySelector("#down");

    top.addEventListener("click",moveTop,false);
    left.addEventListener("click",moveLeft,false);
    right.addEventListener("click",moveRight,false);
    down.addEventListener("click",moveDown,false);

    function moveTop(){
        var actor = document.querySelector("#actor");
        actor.style.top -= "25px";
    }

    function moveDown(){
        var actor = document.querySelector("#actor");
        actor.style.top += "25px";
    }

    function moveRight(){
        var actor = document.querySelector("#actor");
        actor.style.left += "25px";
    }

    function moveLeft(){
        var actor = document.querySelector("#actor");
        actor.style.left -= "25px";
    }

</script>

</html>

    Screenshot

    stick man

    Upvotes: 1

    Views: 1518

    Answers (1)

    Oliver Tappin
    Oliver Tappin

    Reputation: 2541

    You can't add 25px to 25px as a string.

    You can use the += and -= for integers only.

    You would want your function to look like this:

    function moveDown(){
    var actor = document.querySelector("#actor");
    var num = parseInt(actor.style.top) || 0;
    actor.style.top = num + 25 + "px";
}

    Working example: http://jsfiddle.net/5CMWW/

    Upvotes: 3

    Related Questions