Question

I have a simple list which will consist of 1 or more rows.

I have a JavaScript variable which represents the number of rows the entire list should be raised. Note that I am not looking to swap rows within the list.

For instance, if I raised it 2 rows, “third” will be positioned where “first” originally was, and “first” would be positioned two rows higher.

Ideally, I would like a jQuery solution instead of a native JavaScript solution. Thanks

<ul id="myList">
 <li>First</li>
 <li>Second</li>
 <li>Third</li>
</ul>

Answer 1

Check this demo: http://jsfiddle.net/n6UhP/1/

This assumes your list is absolutely positioned.

var liHeight = $('#myList li:first').height(); 

function moveUpBy(_numLIs) {
    $('#myList').animate({
        top: ($('#myList').offset().top - _numLIs * liHeight) + 'px'
    }, 'fast');
}

function moveDownBy(_numLIs) {
    $('#myList').animate({
        top: ($('#myList').offset().top + (_numLIs + 1) * liHeight) + 'px'
    }, 'fast');
}