Tips for creating brief animations

Question

Tips for creating brief animations

I am currently working with a moving div in JavaScript that continues to move for a period of time after the key is released. I am looking for a way to immediately stop the animation upon releasing the key.

The animation is controlled by a switch statement using character codes. Can I integrate a keyup function within this switch statement?

 $(".sprite2").hide();

    $(document).keydown(function(key) {
        switch(key.which) {

            // a
            case 65:
                $(".sprite2").hide();
                $(".sprite").show();
                $(".sprite").animate({left: "-=10px"}, 'fast');
                $(".sprite2").animate({left: "-=10px"}, 'fast');
                break;

            // w
            case    87:
                $(".sprite").animate({top: "-=10px"}, 'fast');
                $(".sprite2").animate({top: "-=10px"}, 'fast');
                break;

            // d
            case 68:
                $(".sprite2").show();
                $(".sprite").hide();
                $(".sprite2").animate({left: "+=10px"}, 'fast');
                $(".sprite").animate({left: "+=10px"}, 'fast');
                break;

            // s
            case 83:
                $(".sprite").animate({top: "+=10px"}, 'fast');
                $(".sprite2").animate({top: "+=10px"}, 'fast');
                break;

            case onkeyup: 
                $(".sprite").animate()
        }
    });
});

The 'sprite' refers to the HTML element(s).

I encountered issues with the .add/removeClass functions, and resolved it by incorporating a second element and toggling their visibility based on the desired action.

Both elements are identical, but one is mirrored horizontally when moving in the opposite direction to simulate forward movement.

javascript

Answer 1

Answer №1

To change the appearance of the div, consider adjusting its CSS properties directly instead of relying on animations. You can update the position by specifying the number of pixels you want it to move relative to its current location upon key press.

Alternatively, here is a demonstration of how to animate movement in different directions based on specific key presses using a switch statement: Check out this JQuery Example

Snippet from the provided link:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>''
<title>Move an Element Using Arrow Keys with jQuery</title>''
<style type="text/css">'
    .box{
        width: 100px;
        height: 100px;
        position: relative;
        margin: 200px auto 0;
        background: url("../images/mushroom.jpg") yellowgreen;
    }
</style>'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>'
<script type="text/javascript">'
$(document).keydown(function(e){
    switch (e.which){
    case 37:
        $(".box").finish().animate({
            left: "-=50"
        });
        break;
    case 38:
        $(".box").finish().animate({
            top: "-=50"
        });
        break;
    case 39:
        $(".box").finish().animate({
            left: "+=50"
        });
        break;
    case 40:
        $(".box").finish().animate({
            top: "+=50"
        });
        break;
    }
});
</script>'
</head>
<body>
    <p><strong>Note:</strong> Click inside the output viewport and use arrow keys to move the box.</p>'
    <div class="box"></div>'
</body>'
</html>'

Answer 2

To change the appearance of the div, consider adjusting its CSS properties directly instead of relying on animations. You can update the position by specifying the number of pixels you want it to move relative to its current location upon key press.

Alternatively, here is a demonstration of how to animate movement in different directions based on specific key presses using a switch statement: Check out this JQuery Example

Snippet from the provided link:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>''
<title>Move an Element Using Arrow Keys with jQuery</title>''
<style type="text/css">'
    .box{
        width: 100px;
        height: 100px;
        position: relative;
        margin: 200px auto 0;
        background: url("../images/mushroom.jpg") yellowgreen;
    }
</style>'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>'
<script type="text/javascript">'
$(document).keydown(function(e){
    switch (e.which){
    case 37:
        $(".box").finish().animate({
            left: "-=50"
        });
        break;
    case 38:
        $(".box").finish().animate({
            top: "-=50"
        });
        break;
    case 39:
        $(".box").finish().animate({
            left: "+=50"
        });
        break;
    case 40:
        $(".box").finish().animate({
            top: "+=50"
        });
        break;
    }
});
</script>'
</head>
<body>
    <p><strong>Note:</strong> Click inside the output viewport and use arrow keys to move the box.</p>'
    <div class="box"></div>'
</body>'
</html>'

Tips for creating brief animations

Answer №1

Similar questions

Utilizing Cordova and AngularJS to efficiently retrieve JSON data through XMLHttpRequest in a factory

Ensure the presence of a value in an array using Angular

What is the best way to optimize my ExpressJS + Sequelize files for proper compatibility with Jest testing framework?

Obtaining serverTime from a webpageWould you like to learn

Place the item at the top of the list before scrolling downwards

Utilize Javascript to create a function that organizes numbers in ascending order

Disabling the global ajax datatype causes issues with Rails remote links

Maintaining Scene Integrity in THREE.JS: Tips for Handling Window Resizing

Contrasting outcomes when tackling a problem in node.js versus python

Using percentages for sizing and margins in CSS

The parseFloat function only considers numbers before the decimal point and disregards

Problems with implementing JavaScript code in a WebView

Transferring an image between two <td> cells within the same table

Determine the total number of hours along with the precise minutes

How can I effectively set up and utilize distinct npm modules on my local environment?

Avoiding redirection in Django template form

Tips for incorporating an additional dataset bar using chart.js

Why is my code executing twice rather than just once?

JavaScript: Can you clarify the value of this variable using five sets of double quotations?

What is the significance of having a timer in a Redux reducer to prompt a re-rendering process?