Question

I downloaded a script which shows the latest Twitter feeds on my website. Everything works fine so far. What I’d like to do now is to change the animation from sliding to top to fadeIn fadeOut.

See here: http://jsfiddle.net/BXJbA/3/

I guess this is the part of the code that needs to be modified to achieve the fade effect but I’m really stuck here and wondering if anyone could help me out on this issue.

jQuery(function($){
    $("#ticker")
        .tweet({
            username: "twitter",
            page: 1,
            avatar_size: 32,
            count: 20,
            loading_text: "loading ..."
        })
        .bind("loaded", function() {
            var ul = $(this).find(".tweet_list");
            var ticker = function() {
                setTimeout(function() {
                    var top = ul.position().top;
                    var h = ul.height();
                    var incr = (h / ul.children().length);
                    var newTop = top - incr;
                    if (h + newTop <= 0)     
                        newTop = 0;
                    ul.animate( {top: newTop}, 400 );
                    ticker();
                }, 4000);
            };
            ticker();
        });
});

Answer 1

Try this: http://jsfiddle.net/BXJbA/4/

ul.animate( {opacity: 0}, 400 ).animate( {top: newTop}, 400 ).animate( {opacity: 1}, 400 );

Played with the opacity which does same thing fadeIn() and fadeOut().