使用 jquery fadeIn 和 setInterval 的双 Twitter feed

Question

我正在制作一个项目，在两个 div 中并排显示两个相反的视图。我已经完成了所有设置，以便推文显示在各自的 div 中，但我想让它们都淡入，一次一条推文（双方都可以同时淡入，我不介意）。

我的推文来自一个数组，我目前正在使用以下代码将更新推送到 div：

for(var i=0; i < tweets.length; i++)
            {
                $("#proTweetList").prepend("<li><img src='" + tweets[i].profile_image_url + "' />" +
                    tweets[i].text+"</li>");
            }

并且

for(var i=0; i < tweets.length; i++)
            {
                $("#antiTweetList").prepend("<li><img src='" + tweets[i].profile_image_url + "' />" +
                    tweets[i].text+"</li>");
            }

我在 Stackoverflow 上找到了一个很好的示例，如下所示：

var x=0; // The corner counter

function fading() {
  $("#corner"+(++x)).fadeIn(2000); // Fade in the current corner

  if (x==4) { // Last image to be faded in?
    clearInterval(); // Stop interval
  }
}

$(document).ready(function(){
  setInterval("fading()",1000); // Call function every second
});

但我对 JQuery 非常陌生，无法弄清楚如何将此代码翻译为让两个不同 div 中的 LI 项目淡入。--

Derek

Answer 1

我会做这样的事情：

for(var i=0; i < tweets.length; i++)
{
    var $item = $("<li style='display:none;'><img src='" + tweets[i].profile_image_url + "' />" +
    tweets[i].text+"</li>");
    $("#proTweetList").prepend($item);
    $item.fadeIn(2000);
}

虽然没有测试那段代码，但我认为它会起作用。这将在 jQuery 对象（$item）中创建列表项，这样您就可以直接在其上使用淡入淡出等功能。

Answer 2

您可以使用一个简单的插件来完成此操作。这样您就可以将行为附加到任意数量的 div 上。我写了一个非常简单的（抱歉未经测试）可能会有所帮助：

;(function ($) {

    $.fn.loadtweets = function (options) {

        var settings = $.extend(
            {
                fadeTime : 1000,
                delay: 2000,
                tweets : array()
            },
            options
        );
        return this.each(
            function() {

                var _this = $(this),
                    tweets = settings.tweets,
                    index = 0;
                var loadTweet = function() {
                    if (tweets.length > index) {
                        _this.prepend("<li><img src='" + tweets[index].profile_image_url + "' />" +
                            tweets[index].text+"</li>").fadeIn(settings.fadeTime);
                        index++;
                        setTimeout(loadTweet, settings.delay);
                    }
                }
                loadTweet();

            }
        );
    };

})(jQuery);

您可以通过以下方式调用此插件（我假设您每个 div 都有一组推文）：

$('#proTweetList').loadtweets({'tweets': proTweetsArray});
$('#antiTweetList').loadtweets({'tweets': antiTweetsArray});