Hide Background on moving Li to Top

Question

I need one help On clicking on Li i am taking that at top its working fine you can see here

http://jsfiddle.net/65fed/1/

 var theLis = lis.get(); // to be sorted
        if (li.is(":animated")) return; // stop double clicks!
        arrayMove(theLis, li.index(), 0);

In my application i have white background But whats happening while moving that li the background comes white as my app has white background. What i need is that when my li moves at top it should adjust the backgroung in this way.

http://jsfiddle.net/N2Py9/

  $('li.method-item').click(function () {

    var $this = $(this),

    callback = function () {
        $this.insertBefore($this.siblings(':eq(o)'));
    };
    $this.slideUp(500, callback).slideDown(500);
});

Note : But approach should be taken as the first link oi provided.

Thanks in Advance

Answer 1

here is one I put together

http://jsfiddle.net/65fed/3/

you might have to alter it to check if it is the first item that is clicked though.

$('li.method-item').click(function () {
    var item = $(this);
    var ul = item.parent();
    item.css({
        position: 'absolute', 
        top: item.position().top, 
        width: item.width()+'px',
        background: '#fff'
    });
    item.animate(
        {top: 0}, 
        {speed: 200, complete: function(){
            var itemclone = item.detach();
            itemclone.css({position: 'relative', top: '0px', background: 'none'});
            ul.prepend(itemclone);
        }}
    );
});

EDIT :
Use the one in the fiddle below
I have updated it to take make sure the clicked one is always on top and also to check if the first item is clicked.

http://jsfiddle.net/65fed/4/