jQuery agregar el valor de css incrementalmente

Question

Quiero agregar o restar el valor de 'top' en este cambio de CSS. En lugar de especificar una cantidad específica de píxeles, me gustaría agregar 20px al valor actual proporcionado por el css externo.

El objetivo es hacer que la lista suba y baje.

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

el código 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

Basado en su edición:

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

O puede agregar 20px con cada clic, mientras que el uso de animate como esto :

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

---

El top propiedad no trabajará a menos que se especifique también position:

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

Cambio position a absolute o relative según sus necesidades.

Tenga en cuenta que si desea que el elemento .list sólo aparecen dentro de su contenedor mientras se cambia top, tiene que asignar a position:relative elemento padre y absolute a .list elemento.

Answer 2

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

Answer 3

Cambiar la 'arriba' clase en diferentes identificadores para los botones

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

tomar el valor actual del margen superior del recipiente y modificarlo:

$('#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 no es realmente para hacer Matemáticas y operaciones, pero más para solo especificar sus estilos. La mejor manera de hacerlo sería, en javascript,

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

por ejemplo. Usar animaciones CSS3 sería incluso mejor. Al igual que este

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

Ver este jsFiddle para un ejemplo completo: 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

El método también permite que el .css() "+ =" y "- =" sintaxis que .animate() tomas. Entonces, simplemente puede hacer esto:

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