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!

Check this question for more details on your issue: http://stackoverflow.com/questions/5524612/how-to-run-jquery-fadein-and-slidedown-simultaneously — Ravi Y, Jan 01 '13 at 07:18
possible duplicate of [jQuery: FadeOut then SlideUp](http://stackoverflow.com/questions/734554/jquery-fadeout-then-slideup) — Frank van Puffelen, Jan 01 '13 at 19:06

David Thomas · Answer 1 · 2013-01-01T08:10:03.093

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:

Thanks alot but it does not have fadeOut effect with slideUp for the first list item. it just hase slideUp alone — , Jan 01 '13 at 07:41
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. — , Jan 01 '13 at 07:42
@namkha87 thanks, but that is not exactly what I meant. please read my comment on your solution — , Jan 01 '13 at 07:51
@Pedar: you want to have *one* visible item at a time? Which then fades out, and the next item fades in? (I'm a little slow, this morning...) — David Thomas, Jan 01 '13 at 07:55
yes. this is a ticker which shows only one item (one news title) at a time. the first item should go up and fade while the next item should come up with fadeIn effect. — , Jan 01 '13 at 08:03

phnkha · Accepted Answer · 2013-01-01T08:10:19.443

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

Thanks. but this is not exactly what is needed. only one item must be shown and first item should fadeOut with slideup and the next item should fadeIn with slideUp — , Jan 01 '13 at 07:50
Thanks. this is so close to what I wanted and solved long way of my problem. — , Jan 01 '13 at 09:02

How to slide and fade a div using jQuery?

2 Answers2