JQUERY的onClick變化「頂」屬性

Question

我試圖使用jQuery創建一個垂直卷軸，我有我的代碼的麻煩..

function scrolldown() {  
    var newtop = $('.scroll-content').css('top') + '250'; 
    $('.scroll-content').css({top: newtop}); 
} 

的CSS：

.scroll-content {position:absolute; top:0px} 

沒有問題CSS我可以改變螢火蟲的值，並能正常工作，但代碼是問題。我希望它將250px添加到當前值，但它不起作用，當使用.html(newtop)時，我可以看到「top」值的輸出是0px250 ...任何想法我做錯了什麼？

Answer 1

$('.scroll-content').css('top') 

將返回類似「123px」的東西，這是一個字符串（由於「px」）。如果加上「250」，你有「123px250」，這是不是你想要的...

試試這個來代替：

var newtop = $('.scroll-content').position().top + 250; 
$('.scroll-content').css('top', newtop + 'px'); 

Answer 2

確保要添加到您的頂值的整數不是一個字符串。見下圖：

var newtop = $('.scroll-content').css('top') + 250; 
    $('.scroll-content').css({top: newtop}); } 

Answer 3

您需要的CSS字符串（ '0像素'）轉換成一個int（0），所以你可以添加250，然後添加 'PX' 再次

function scrolldown() { 
    var newtop = parseInt($('.scroll-content').css('top')) + 250; 
    $('.scroll-content').css({top: newtop+'px'}); 
} 

Answer 4

作爲替代發佈的答案，您可以通過.animate()使用+=快捷方式，沒有時間，像這樣：

$(".scroll-content").animate({ top: "+=250px" }, 0);​ 

這將使改變增加250像素瞬間。如果你真的想動畫，只需將0改爲400即可，例如獲得400ms的持續時間。