Smooth fade out fade in

Question

I want to have a smooth refresh on my twitter app, I'm not good in Javascript, so I can't solve it. I tried like 100 things, but nothing worked... Could someone solve my problem?

I want when the interval is reached that my object (DIV) fades out and in smooth. But when it fades back in, it must be the new content. When the interval is reached and the content is reloaded, it auto displays the new content now...

Ohw and if someone could fix my second problem, I want that my object (interval object) Is loaded when my page is loaded. My code that I'm using now:

    setInterval(function () {
var config1 = {
  "id": '554682452443430912',
  "domId": 'tw-widget1',
  "maxTweets": 1,
  "enableLinks": true,
  "dateFunction": dateFormatter,
};

twitterFetcher.fetch(config1);



function dateFormatter(date) {
  return date.toLocaleString();
}

twitterFetcher.fetch(config1);

}, 10000);

Please help me soon.

The HTML "object" is the following:

<div id="tw-widget1"></div>

Answer 1

You want to chain event handlers together.

$(function () {
    setInterval(checkUpdate, 10000);
});

function checkUpdate() {
    var config1 = {
        "id": '554682452443430912',
        "domId": 'tw-widget1',
        "maxTweets": 1,
        "enableLinks": true,
        "dateFunction": dateFormatter,
    };

    // twitterFetcher.fetch(config1);
    var div = $("#" + config1.domId);
    div.data('context', JSON.stringify(config1));
    div.fadeOut(500, updateTweet);
}

function dateFormatter(date) {
     return date.toLocaleString();
}

function updateTweet() {
    var div = $(this); 
    var config1 = jQuery.parseJSON(div.data('context'));

    div.empty();
    div.html("New Tweet ID " + config1.id);
    // Then set it to fadeIn.
    div.fadeIn();
}

jsFiddle: http://jsfiddle.net/avjxmqv5/

Code in the $(function () {}) executes when the DOM is ready so you could use that to load your object(s).

Give the jsFiddle ten seconds for the action to be visible.

Answer 2

The answer has been found. Solution code:

    $(function () {
     checkUpdate();
    setInterval(checkUpdate, 30000);
});

function checkUpdate() {
    var config1 = {
        "id": '554682452443430912',
        "domId": 'tw-widget1',
        "maxTweets": 1,
        "enableLinks": true,
        "dateFunction": dateFormatter,
    };

    twitterFetcher.fetch(config1);
    var div = $("#" + config1.domId);
    div.data('context', JSON.stringify(config1));
    div.fadeOut(500, updateTweet);
}

function dateFormatter(date) {
     return date.toLocaleString();
}

function updateTweet() {
    var div = $(this); 
    var config1 = jQuery.parseJSON(div.data('context'));

    //div.empty();
    div.html(twitterFetcher.fetch(config1));
    // Then set it to fadeIn.
    div.fadeIn(500);
}

Thanks to all for helping me out!