How to slide and fade a div using jQuery?

I had a look at this and this but It did not help.
I have a news ticker. the list with fixed height has items which go up and appends to end of list.

EDITED : JUST ONE ITEM SHOWN AT A TIME and by first item sliding up and fading out the next one slides up and fades in

<ul id="ticker">
    <li>
        Sample note 1
    </li>
    <li>
        Sample note 2
    </li>
    <li>
        Sample note 3
    </li>
</ul>  

This is the javascript code:

function tick(){
    $('#ticker li:first').slideUP( function () { $(this).appendTo($('#ticker')).slideDown(); });
}
setInterval(function(){ tick () }, 2000);  

I want to configure this so not only it slides Up but also fades Out and at the bottom it fades In with sliding effect.
I know I should use animate effect. I tried it so many times but none of them worked. please help me on this.
thanks!

Try my solution at http://jsfiddle.net/zLe2B/19/

html:

<ul id="ticker">
    <li>
        <span>Sample note 1</span>
    </li>
    <li>
        <span>Sample note 2</span>
    </li>
    <li>
        <span>Sample note 3</span>
    </li>
</ul> 

JavaScript:

    $(document).ready(function(){
    function tick(timeout){
        var first = $('#ticker li:first');
        var next = first.next();

        first.children('span').fadeOut(timeout);
        first.slideUp(timeout, function () {      
             first.appendTo($('#ticker'));                
        });

        next.slideDown(timeout);
        next.children('span').hide().fadeIn(timeout);
    }
    setInterval(function(){tick(1000)}, 2000);
});​

​ css:

ul, li, span {
    display: block
}

#ticker li {
    height: 20px;
}

#ticker {
    height: 20px;
    overflow: hidden;
}