Home/ Questions/Q 8938041
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T10:32:00+00:00

Code: <html xmlns=http://www.w3.org/1999/xhtml> <head> <title></title> <script src=jQuery/jquery-1.8.3.min.js type=text/javascript></script> <script type=text/javascript> $(document).ready(function () { $(document).keydown(function

  • 0

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {           
        $(document).keydown(function () {
            alert("hello");
            $('div').animate({ left: '+=10px' }, 500);
        });
    });

</script>
<style type="text/css">
div
{
     height: 50px; width: 50px; background-color: Red;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

I want to just move my div to the right on every key down, but for some reason, this won’t work. I’m getting the “hello” alert so there is probably some small mistake in the animate statement that I just can’t figure out.

Can anyone please tell me why this is not working and the correct way to do it?

Thanks in advance. 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That is because left/top/right/bottom properties only apply to positioned elements.

    So you either need to use position:relative/position:absolute on the div, or animate the margin-left instead. (depends on the end result you want..)

    Quote from the specs

    9.3.2 Box offsets: ‘top‘, ‘right‘, ‘bottom‘, ‘left‘

    An element is said to be positioned if its ‘position‘ property has a value other than ‘static‘. Positioned elements generate positioned boxes, laid out according to four properties:

    • 0