Двойные каналы Twitter с помощью jquery fadeIn и setInterval - PullRequest
Новая
       23

Двойные каналы Twitter с помощью jquery fadeIn и setInterval

0 голосов
/ 16 февраля 2011

Я делаю проект, который показывает два противоположных вида в двух элементах 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 и не могу понять, как преобразовать этот код в получение элементов LI в ДВУХ различных div'ах для постепенного появления.

- Дерек

Ответы [ 2 ]

0 голосов
/ 16 февраля 2011

Вы можете сделать это с помощью простого плагина. Таким образом, вы можете прикрепить поведение к любому количеству элементов 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});
0 голосов
/ 16 февраля 2011

Я бы сделал что-то вроде этого: 

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), и вы сможете напрямую использовать такие функции, как fade.

...