Controlling The Animation Of Fade In And Fade Out

I have the following markup.

• Education, then, beyond all other devices of human origin, is the great equalizer of the conditions of men,

Solution 1:

Instead of:

$(this).appendTo($('#ticker')).css('opacity', 1);

Do something like:

$(this).appendTo($('#ticker')).animate({'opacity' : 1}, 2000);

Solution 2:

Check FIDDLE

functiontick() {
    $('#ticker li:first').animate({
        'opacity': 0
    },2000, function() {
        $(this).appendTo($('#ticker')).animate({'opacity' : 1}, 2000);
    });
}
setInterval(function() {
    tick()
}, 8000);​

Solution 3:

I think what you want is something more like this:

var$ticker = $('#ticker'); // save the static element$ticker.children(':not(:first-child)').hide();

functiontick(){
    $ticker.children(':first-child').fadeOut(1000, function () {
        $(this).appendTo($ticker);
        $ticker.children().first().fadeIn(1000);
    });
}
setInterval(tick, 8000);

http://jsfiddle.net/ffe6q/3/

One item is shown at a time, and the displayed item fades out then the next item fades in.

Solution 4:

It would be easier and more concise if you used the jQuery effects .fadeIn(time_in_ms) & .fadeOut(time_in_ms). More info here: http://api.jquery.com/fadeIn/ & http://api.jquery.com/fadeOut/.

example: $('#ticker li:first').fadeIn(1000);

Solution 5:

How about this?

var $ticker = $('#ticker'); // save the static elementfunctiontick(){
    $ticker.children().first().fadeOut(2000, function () {
        $(this).appendTo($ticker).fadeIn(500);
    });
}
setInterval(tick, 8000);

jsfiddle based on susanth reddy's