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

Swap out internal Wordpress hyperlinks for Next.js Link Component

Retrieving the contents of a unique 404 error page using ajax

Running an express server on localhost with nginx: A step-by-step guide

The Angular @HostListener beforeunload Event is a powerful way to handle

Leveraging Github CI for TypeScript and Jest Testing

Cross-Origin Request Sharing (CORS) problem encountered while making an API call with

Issues with Angular2 causing function to not run as expected

Ways to verify the presence of an item in a MonoDB array

Alert: React-Weather is causing an invalid element type in React

Is it possible to manipulate a modal within a controller by utilizing a certain attribute in HTML, based on specific conditions (without relying on any bootstrap services), using AngularJS?

When utilizing JqGrid, make sure to utilize the 'aftersavefunc' and 'successfunc' methods prior to executing the 'saveRow' function

Step-by-step guide to implementing a sticky header while scrolling

Adjust CardMedia Images to match their content in the new MUI 5 version

What is the best way to combine PHP and HTML within a JavaScript script?

The modal window pops up immediately upon the first click

The instance of my ObjectType is coming back as an empty entity

Update the user information quickly

Utilize the JavaScript .send function to pass an array

Implement a callback function for unchecked checkboxes on change

The synergy between HTML and JavaScript: A beginner's guide to frontend coding