Untitled

jQuery add css value incrementally

$('.up').click(function(){

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

});

       

<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>​

       

$('.up').click(function(){

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

});

       

$('.up').click(function(){

   $('.list').css({position:'absolute'});

   $('.list').animate({top: '+=20'});

});

       

$('.up').click(function(){

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

});

       

$('.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');

});

       

<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)

})

       

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

       

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)"