jQuery增量增加css值

Question

我想在此css更改中添加或减去'top'的值。而不是指定一个特定的像素量我想添加20px到外部CSS提供的当前值。

目标是使列表向上移动。

$('.up').click(function(){ 
    $('.list').css('top','-20px'); 
}); 

的HTML

<div id="container"> 
    <ul class="list"> 
     <li >first item</li> 
     <li class="active">second item</li> 
     <li>third item</li> 
     <li >fourth item</li> 
    <ul> 
</div> 
<a href="#" class="up">up</a> 
<a href="#" class="up">down</a>​ 

Answer 1

根据您的编辑：

$('.up').click(function(){ 
    $('.list').css({position:'absolute', top: parseInt($('.list').css('top'), 10) + 20 + 'px'}); 
}); 

或者你可以同时使用animate这样每次单击添加20px ：

$('.up').click(function(){ 
    $('.list').css({position:'absolute'}); 
    $('.list').animate({top: '+=20'}); 
}); 

---

的top属性不会工作，除非你还指定position：

$('.up').click(function(){ 
    $('.list').css({position:'absolute', top:'-20px'}); 
}); 

变化position到absolute或relative按您的需求。

请注意，如果您希望.list元素只出现在其容器内，同时改变top，你需要分配到position:relative父元素和absolute到.list元素。

Answer 2

$('.list').css('position','relative').css('top','-20px');

Answer 3

更改“向上”全班学生分成不同的ID对按钮

<a href="#" id="up">up</a> 
<a href="#" id="down">down</a>​ 

以容器的上边距的当前值并进行修改：

$('#up').on('click', function(){ 
    currentValue = parseInt($('#container').css("margin-top")); 
    currentValue -= amount; 
    $('#container').css("margin-top", currentValue) 
}) 

$('#down').on('click', function(){ 
    currentValue = parseInt($('#container').css("margin-top")); 
    currentValue += amount; 
    $('#container').css("margin-top", currentValue) 
}) 

Answer 4

CSS是不是真的这样做数学和操作，但更多的只是指定你的风格。这样做的最佳方式是在javascript中，

getElementById("nameofyourelement").style['top'] = "5px" 

例如。使用CSS3动画甚至会更好。这样

getElementById("nameofyourelement").style['-webkit-transition-duration'] = "1s" //1 second duration for animation, set to 0 if you don't want animation 
getElementById("nameofyourelement").style['-webkit-transform'] = "translateY(5px)" 

Answer 5

为一个完整的例子请参阅本的jsfiddle：http://jsfiddle.net/NYVmw/

$('.up').click(function(){ 
    var newtop = $('.list').position().top - 20; 
    $('.list').css('top', newtop + 'px'); 
}); 

$('.down').click(function(){ 
    var newtop = $('.list').position().top + 20; 
    $('.list').css('top', newtop + 'px'); 
}); 

Answer 6

.css()该方法还允许 “+ =” 和 “ - =” 语法.animate()需要。所以你可以简单地做到这一点：

$('.up').click(function(){ 
    $('.list').css('top','-=20px'); 
});