Question

我在尝试整理一些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条，直到没有剩下，之后没有其他内容显示。

请有人给我一些指示

由于

Answer 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/

Answer 2

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

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/

一次循环播放一条推文Jquery

2 个答案: