javascript - Continously move div with arrow keys - Stack Overflow

admin管理员组

文章数量:1022488

I found a fiddle that moves a div when pressing the arrow keys on your keyboard, however it needs to be pressed each time to get a fluid movement.

So how do you move a div like the example below, but by keeping the arrow key pushed down?

/

jQuery

$(document).keydown(function(e) {
switch (e.which) {
case 37:
    $('div').stop().animate({
        left: '-=50'
    }); //left arrow key
    break;
case 38:
    $('div').stop().animate({
        top: '-=50'
    }); //up arrow key
    break;
case 39:
    $('div').stop().animate({
        left: '+=50'
    }); //right arrow key
    break;
case 40:
    $('div').stop().animate({
        top: '+=50'
    }); //bottom arrow key
    break;
  }
});

HTML

div{
  background:#ccc;
  height:100px;
  width:100px;
  position: absolute;
  top: 0;
  left: 0;
}

I found a fiddle that moves a div when pressing the arrow keys on your keyboard, however it needs to be pressed each time to get a fluid movement.

So how do you move a div like the example below, but by keeping the arrow key pushed down?

http://jsfiddle/ambiguous/N5Ltt/2/

jQuery

$(document).keydown(function(e) {
switch (e.which) {
case 37:
    $('div').stop().animate({
        left: '-=50'
    }); //left arrow key
    break;
case 38:
    $('div').stop().animate({
        top: '-=50'
    }); //up arrow key
    break;
case 39:
    $('div').stop().animate({
        left: '+=50'
    }); //right arrow key
    break;
case 40:
    $('div').stop().animate({
        top: '+=50'
    }); //bottom arrow key
    break;
  }
});

HTML

div{
  background:#ccc;
  height:100px;
  width:100px;
  position: absolute;
  top: 0;
  left: 0;
}

• javascript
• jquery
• html

Share Improve this question Follow asked Jan 13, 2015 at 12:40 KulerboxKulerbox 20022 silver badges1313 bronze badges 3

• I use Chrome. And pressing the arrow key down and holding it actually successfully brought the block down continuously. – Adib Commented Jan 13, 2015 at 12:42
• You could do something like this (increase distance and add time) >> jsfiddle/N5Ltt/590 – webkit Commented Jan 13, 2015 at 12:47
• Using Chrome also works for me, but the progress of movement is a lot slower than if I continuously tap. – Mike Rouse Commented Jan 13, 2015 at 12:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

This could be an approach for you:

var pressed = false;
$(document).keydown(function(e) {
    if(!pressed){ //only start animation once
        width = $(this).width();
        height = $(this).height();
        switch (e.which) {
            case 37:
                $('div').stop().animate({
                    left: '-=' + width //allow the user the move the div over the whole doc
                }, 2000); //left arrow key
                break;
        // and so on
       }
    }
    pressed = true;
}).keyup(function(){
    $('div').stop(); // stop the current animation
    pressed = false;
});

perhaps you have to change the variables width and height to fit in your needs.

DEMO

you could set a variable to true when the key is pressed down and false when the key is let go

I found a fiddle that moves a div when pressing the arrow keys on your keyboard, however it needs to be pressed each time to get a fluid movement.

So how do you move a div like the example below, but by keeping the arrow key pushed down?

/

jQuery

$(document).keydown(function(e) {
switch (e.which) {
case 37:
    $('div').stop().animate({
        left: '-=50'
    }); //left arrow key
    break;
case 38:
    $('div').stop().animate({
        top: '-=50'
    }); //up arrow key
    break;
case 39:
    $('div').stop().animate({
        left: '+=50'
    }); //right arrow key
    break;
case 40:
    $('div').stop().animate({
        top: '+=50'
    }); //bottom arrow key
    break;
  }
});

HTML

div{
  background:#ccc;
  height:100px;
  width:100px;
  position: absolute;
  top: 0;
  left: 0;
}

I found a fiddle that moves a div when pressing the arrow keys on your keyboard, however it needs to be pressed each time to get a fluid movement.

So how do you move a div like the example below, but by keeping the arrow key pushed down?

http://jsfiddle/ambiguous/N5Ltt/2/

jQuery

$(document).keydown(function(e) {
switch (e.which) {
case 37:
    $('div').stop().animate({
        left: '-=50'
    }); //left arrow key
    break;
case 38:
    $('div').stop().animate({
        top: '-=50'
    }); //up arrow key
    break;
case 39:
    $('div').stop().animate({
        left: '+=50'
    }); //right arrow key
    break;
case 40:
    $('div').stop().animate({
        top: '+=50'
    }); //bottom arrow key
    break;
  }
});

HTML

div{
  background:#ccc;
  height:100px;
  width:100px;
  position: absolute;
  top: 0;
  left: 0;
}

• javascript
• jquery
• html

Share Improve this question Follow asked Jan 13, 2015 at 12:40 KulerboxKulerbox 20022 silver badges1313 bronze badges 3

• I use Chrome. And pressing the arrow key down and holding it actually successfully brought the block down continuously. – Adib Commented Jan 13, 2015 at 12:42
• You could do something like this (increase distance and add time) >> jsfiddle/N5Ltt/590 – webkit Commented Jan 13, 2015 at 12:47
• Using Chrome also works for me, but the progress of movement is a lot slower than if I continuously tap. – Mike Rouse Commented Jan 13, 2015 at 12:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

This could be an approach for you:

var pressed = false;
$(document).keydown(function(e) {
    if(!pressed){ //only start animation once
        width = $(this).width();
        height = $(this).height();
        switch (e.which) {
            case 37:
                $('div').stop().animate({
                    left: '-=' + width //allow the user the move the div over the whole doc
                }, 2000); //left arrow key
                break;
        // and so on
       }
    }
    pressed = true;
}).keyup(function(){
    $('div').stop(); // stop the current animation
    pressed = false;
});

perhaps you have to change the variables width and height to fit in your needs.

DEMO

you could set a variable to true when the key is pressed down and false when the key is let go

本文标签： javascriptContinously move div with arrow keysStack Overflow