0

我与一些 jQuery 我试图放在一起有点混乱。我正在尝试通过我的应用程序中的 JSON 转储循环浏览前 5 条推文，然后我想在动画循环中一次显示一条。

我的html

<div id="innerTwitter"> </div>

和到目前为止的 jQuery

var $container = $('#innerTwitter');

$.get('/feed', function(data) {
    $container.empty();
    $(data).slice(0,5).each(function(_, tweet) { // Grab first 5 Tweets
        var $tweet = $(document.createElement('p'));
        $tweet.text(tweet.text);
        $container.append($tweet);

        var ticker = function() {
          setTimeout(function() {
    $container.find('p:first').animate( {marginTop: '-90px'}, 500, function() {
    $(this).detach().removeAttr('style');
    });
    ticker();
  }, 10000);
  };
  ticker();
    });
}, 'json');

因此，目前它同时显示 5 条推文，然后一次删除 1 条，直到没有留下任何内容，之后不再显示其他任何内容。

谁能给我一些指示

谢谢

4

2 回答 2

1

我想这就是你所追求的。这将依次显示每条推文并淡入淡出。

var container = $("#innerTwitter");

function showTweets(tweets) {
    var tweetPs = $.map(tweets, function (t) {
        return $('<p></p>').text(t.text).hide();
    });

    container.append(tweetPs);
    tweetPs[0].show();

    var currentIndex = 0;

    var nextTweet = function () {
        var nextIndex = currentIndex == tweets.length - 1 ? 0 : currentIndex + 1;
        tweetPs[currentIndex].fadeOut(400, function () {
            tweetPs[nextIndex].fadeIn(400);
        });
        currentIndex = nextIndex;
    };

    setInterval(nextTweet, 2000);
}

showTweets([
    { text: "tweet1" },
    { text: "tweet2" },
    { text: "tweet3" },
    { text: "tweet4" },
    { text: "tweet5" },
]);

这是在行动：http: //jsfiddle.net/Tx8hj/1/

于 2013-06-16T16:01:58.493 回答
1

尝试这个

var container = $("#innerTwitter");

$.get('/feed', function(data) { showTweets($(data).slice(0,5)); }, 'json');

function showTweets(tweets) {
    container.empty();

    for (var i = 0; i < tweets.length; i++) {
        var tweet = $("<p>").text(tweets[i].text);
        tweet.hide();
        tweet.appendTo(container);
    }

    tweets = container.children();

    var showNext = function(index) {
        if (index < tweets.length)
            tweets.eq(index).fadeIn(400, function() { showNext(index + 1); });
    }

    showNext(0);
}

示例：http: //jsfiddle.net/q8zXa/1/

于 2013-06-16T14:54:20.607 回答