How to slide and fade a div using jQuery?

Question

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!

Answer 1

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;
}

Answer 2

A simple approach is:

function ticker(el, duration) {
    if (!el) {
        return false;
    }
    else {
        el = typeof el === 'object' ? el : $(el);
        duration = duration || 500;
        $(el).find('li').first().slideUp(duration, function() {
            $(this)
                .insertAfter($(this).nextAll('li').last())
                .fadeIn(duration, function(){
                    ticker(el, duration);
                });
        });
    }
}

You can call this with a jQuery object:

ticker($('#ticker'));​​​​​

JS Fiddle demo.

Or using a plain DOM node, with a specified duration (in milliseconds):

ticker(document.getElementById('ticker'), 300);​​​​​​​​​

JS Fiddle demo.

In response to the comment left by the OP (in comments, below):

This solution slides up the first item and fades in the last one. but I want fade+slide at both first and next items. the list is styled so just one item displayed at a time.

I offer this, using animate() to animate the height/opacity of the list elements:

function ticker(el, duration) {
    if (!el) {
        return false;
    }
    else {
        el = typeof el === 'object' ? el : $(el);
        duration = duration || 500;
        var first = el.find('li').first(),
            last = first.nextAll().last(),
            h = last.height();
        first.animate({
            height: 0,
            opacity: 0
        }, duration, function() {
            $(this).insertAfter(last).animate({
                height: h,
                opacity: 1
            }, duration, function() {
                ticker(el, duration);
            });
        });
    }
}

JS Fiddle demo.

Edited following clarification from OP, to the following:

function ticker(el, duration) {
    if (!el) {
        return false;
    }
    else {
        el = typeof el === 'object' ? el : $(el);
        duration = duration || 500;
        var lis = el.find('li').css('display', 'none');

        lis.first().fadeIn(duration, function(){
            $(this).slideUp(duration, function(){
                $(this).insertAfter(lis.last());
                ticker(el, duration);
            });
        });
    }
}

JS Fiddle demo.

References:

• animate().
• css().
• fadeIn().
• find().
• first().
• insertAfter().
• last().
• nextAll().
• slideUp().