JQuery: Move Up, down, left, and right on the control layer with the arrow keys _ jquery-js tutorial

This article will use jquery to implement the following functions: When you press the direction key, the layer smoothly moves 20 pixels to the corresponding direction; the key codes of the four direction keys are 37 (left), 38 (top) 39 (right) and 40 (lower). You can find out if you are interested. Question: When you press the direction key, make the layer smoothly move 20 pixels to the corresponding direction. The keys of the four direction keys are 37 (left), 38 (top), and 39 (right) and 40 (lower ).

Then I wrote the following code::

$ P is the layer to be moved, and its position has been set to relative in CSS. There seems to be no problem at a glance, and the following problems are found after running:

1. After you press down, there is no response after you press up.

2. After you press the right button, the left button does not respond.

Later, after a few clicks, I suddenly realized:

When you press down, the top value is 20px, and then press up. From Firebug, we can see that the bottom value is also 20px, the layer does not move up because the browser first parses top, that is, {top: 20px; bottom: 100px} is the same as {top: 20px}, regardless of the bottom value. After you press the right button, there is no response to the left button. The key is the left value.

So I changed the code.:

As expected, it is okay to go up and down.

Experience: It has always been known that the top and left attributes are sufficient for positioning, but the right/bottom attribute is still written. The details are for life.