Question

我想通过应用.css（）使元素在箭头按下移动，但它根本不工作，我无法弄清楚为什么。完全相同的代码与JQ animate（）完美配合。你能解释一下为什么.css不工作吗？我知道有更好的方法可以做到这一点，但我只是好奇为什么它不附加top属性.Below是带有动画的代码

$(document).ready(function(){
    $('body').keydown(function() {
        if (event.which == 38)
        {
            $('div').animate({top:'-=10px'},'fast');
        }
        else if (event.which == 40)
        {
            $('div').animate({top:'+=10px'},'fast');
        }
        else if (event.which == 37)
        {
            $('div').animate({left:'-=10px'},'fast');
        }
        else if (event.which == 39)
        {
            $('div').animate({left:'+=10px'},'fast');
        }
    }); 
});

Answer 1

使用.css()调整属性需要事先明确设置属性，而.animate()将调整元素的计算位置，而不是专门设置。

在下面的代码段中，我提供了#movable元素top和left属性，并在没有它们的情况下离开了另一个<div>。应用.css()的选择器会同时影响<divs>，但请注意，只有<div>和top属性的left会移动。

$(document).ready(function(){
    $('body').keydown(function(event) {
        if (event.which == 38)
        {
            $('div').css({top:'-=10px'});
        }
        else if (event.which == 40)
        {
            $('div').css({top:'+=10px'});
        }
        else if (event.which == 37)
        {
            $('div').css({left:'-=10px'});
        }
        else if (event.which == 39)
        {
            $('div').css({left:'+=10px'});
        }
      
      //added to stop Stack Overflow scrolling
      event.preventDefault();
    }); 
  
  
});

div {
  position:relative;
}

/* Set top and left of the movable div explicitly */
#movable {
  top:0px;
  left:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="movable">movable</div>
<div>immovable</div>

Answer 2

帖子中的代码是您的真实代码吗？因为您使用的是event变量，但是您没有为传递给keydown的函数定义任何参数。它必须是$('body').keydown(function(event) {。

JS通过应用.css使元素移动

2 个答案: