增量式CSS定位不起作用

我發誓這應該可行，但事實並非如此。我必須失去了一些東西簡單：增量式CSS定位不起作用

HTML：

<div id="box"></div>

CSS：

#box { 
    position: absolute; 
    background: blue; 
    width: 200px; 
    height: 200px; 
    left: 20px; 
    top: 20px; 
}

的JavaScript：

$('#box').click(function(e) { 
    if (e.shiftKey) 
     $(this).css('left', '70px'); 
    else 
     $(this).css('left', '+=50'); 
});

如果你按住Shift並單擊，該框移動正如它應該。嘗試點擊不換班，並且該框不會將其左邊緣位置增加50px。是什麼賦予了？

來源

2011-07-01 CaptSaltyJack

這是一個jQuery錯誤，我正在努力尋找一個鏈接。這裏曾問過很多次。 – thirtydot

[在jQuery 1.6.1中使用箭頭鍵移動div不起作用]（http://stackoverflow.com/questions/5983034/move-div-with-arrow-key-in-jquery-1-6- 1-does-not-work） – thirtydot

見http://bugs.jquery.com/ticket/9237

的錯誤將被固定在1.6.2。

破碎：http://jsfiddle.net/Kwpuq/

修正：http://jsfiddle.net/Kwpuq/1/ - 這是使用「jQuery的（邊緣）」

來源

2011-07-01 21:50:50 thirtydot

時，不要使用'px'完美，謝謝。唉，他們修正了$ .css（）而不是$ .animate（）。 – CaptSaltyJack

如果您現在需要它，請使用'parseInt（$（this）.css（'left'））+ 50 +「px」'。 – thirtydot

@CaptSaltyJack：最後你不需要'+「px」'。我的錯。 – thirtydot

變化：

$(this).css('left', '+=50');

到：

$(this).css('left', '+=50px');

來源

2011-07-01 21:44:40 Michael

當然，我嘗試過。 jQuery文檔顯示，在使用+ =或 - = – CaptSaltyJack

$('#_testList').css('left', (parseFloat($('#_testList').css('left')) + 10) + 'px');

這得到字符串的數字部分 - 在這種情況下，它得到10出10px的的 - 加10，然後附加'px'。在CSS中，您必須在值的末尾具有度量單位。

希望這會有所幫助！

來源

2011-07-01 21:55:27 mccow002

我的解決方案可能是以下幾點：

$('#box').click(function(e) { 
    if (e.shiftKey) 
     $(this).css('left', '70px'); 
    else { 
     var left = parseInt($(this).css('left')); 
     left+=50; 
     $(this).css('left',left)} 
});

演示：http://jsfiddle.net/JYAqr/

$(this).css('left')返回一個字符串，所以你必須prase它作爲整數，然後添加50像素

來源

2011-07-01 21:56:26 Sotiris

增量式CSS定位不起作用

回答

相關問題