Simple JQuery Fade ticker

Question

I\'ve looked at multiple tickers and they are all far to weighted. I\'m after a very simple fadeIn() fadeOut() JQuery ticker for a list of elements to display titles.

Answer 1

Untested. This simply reschedules the fade out/in, which are chained together, on the next element after the current one completes.

function fadeTicker( $collection, $elem, interval )
{
     var $next = $collection.eq(($collection.index($elem) + 1) % $collection.length));
     $(elem).fadeOut( function() {
          $(next).fadeIn( function() {
               setTimeout( function() {
                       fadeTicker( $collection, $next, interval );
                   },
                   interval
               );
          });
     );
);

Used as:

$(function() {
    fadeTicker( $('li'), $('li:first'), 5000 );
}

Answer 2

I did a very simple fader, very light weight. used it for images but changed it for divs:

Script

var aniSpd01 = 1000;
var fadeSpd01 = 1000;

$(function() {
    var startIndex = 0;
    var endIndex = $('#aniHolder div').length;
    $('#aniHolder div:first').fadeIn(fadeSpd01);

    window.setInterval(function() {
    $('#aniHolder div:eq(' + startIndex + ')').delay(fadeSpd01).fadeOut(fadeSpd01);
        startIndex++;
        $('#aniHolder div:eq(' + startIndex + ')').fadeIn(fadeSpd01);

        if (endIndex == startIndex) startIndex = 0;
    }, aniSpd01);
});

HTML

<div id="aniHolder">
    <div>Story 1</div>
    <div>Story 2</div>
    <div>Story 3</div>
</div>

CSS

#aniHolder {width:640px; height:480px; }
#aniHolder div {position:absolute; width:640px; height:480px; display:none;}

Answer 3

Try the jquery Cycle plugin; I've used it for creating a simple set of rotating text links, there's a "lite-min" version which keeps it nice and lean if you only want basic functionality and effects.

Answer 4

The jQuery WebTicker is also a very good alternative for rotating text links; whilst giving you complete control of the direction of rotation and the speed; it also allows flexibility of colours and size using CSS. The ticker allows non-stopping rotation and once you reach the last item the first one will start straight away.