JS通過應用.css使元素移動

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

移動div需要移動空間，或者你可以使用position:absolute
演示

Answer 2

使用.css()調整屬性需要事先顯式設置屬性，而.animate()將調整元素的計算位置，而不是專門設置它。

在下面的代碼片段中，我給出了#movable元素的top和left屬性，並在沒有它們的情況下留下了另一個<div> 。 應用.css()的選擇器會影響兩個<divs> ，但請注意只有具有top和left屬性的<div>才會移動。

 $(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 3

帖子中的代碼是您的真實代碼嗎？ 因為您正在使用event變量，但是您沒有為傳遞給keydown的函數定義任何參數。 它需要是$('body').keydown(function(event) { 。