Исчезновение в новых параграфах

Question

Я работаю над новым тикером в твиттере, используя jquery, и я застрял на визуальном эффекте.У меня есть все твиты, которые я хочу показать, отформатированные как строки, хранящиеся в массиве.Строки выглядят так:

<p><a href="http://twitter.com/user">user</a>: tweet text</p>

Я бы хотел, чтобы абзац добавлялся к контейнеру DIV по одному, с некоторым эффектом затухания, как тот, который вы получаете в примере, когда вынажмите на кнопку: http://jsbin.com/uneso (пример от здесь ).

Я попытался использовать код из примера, и я написал это:

for (i=0; i<tweetsArray.length; i++){<br> var tweetTmp = tweetsArray[i]; $(displayContainer).append(tweetTmp).fadeIn("slow");<br> }

Но похоже, что все добавления выполняются вместе, и затем один единственный эффект fadeIn () применяется ко всему div.

Есть идеи, почему он так себя ведет?

Заранее спасибо, Марчелло

PS Я тоже пытался посмотреть это , но все еще не мог решить свою проблему.

Answer 1

Ваш код цикличен, не дожидаясь появления замираний. Если вы хотите дождаться каждого исчезновения, прежде чем добавлять следующий div, вам нужно либо использовать обратный вызов завершения fadeIn (мое предпочтительное решение), либо отложить добавление (любимый из других Я уважаю).

Вот грубые примеры:

Использование обратного вызова завершения:

var tweetArray = [
  "This is tweet 1",
  "This is tweet 2",
  "This is tweet 3",
  "This is tweet 4"
  ];

$("#btnGo").click(function() {
  appendAndFade(document.body, tweetArray);
});

function appendAndFade(parent, tweets) {
  var index;

  index = 0;
  doOne();

  function doOne() {
    if (index < tweets.length) {
      $("<p>")
        .html(tweets[index++])
        .hide()
        .appendTo(parent)
        .fadeIn(doOne);
    }
  }
}

Живая копия

Обратите внимание, как мы используем обратный вызов на fadeIn для запуска следующего добавления и исчезновения (doOne).

Использование delay:

var tweetArray = [
  "This is tweet 1",
  "This is tweet 2",
  "This is tweet 3",
  "This is tweet 4"
  ];

$("#btnGo").click(function() {
  appendAndFade(document.body, tweetArray);
});

function appendAndFade(parent, tweets) {
  var index;

  for (index = 0; index < tweets.length; ++index) {
      $("<p>")
        .html(tweets[index])
        .hide()
        .delay(index * 400)
        .appendTo(parent)
        .fadeIn(400);
  }
}

Живая копия

Answer 2

Я думаю, что fadeIn () должен быть применен к присоединенному абзацу.

$.each(tweetsArray, function(i, tweet){
    $(displayContainer).append( $(tweet).css('display', 'none').fadeIn() );
});  

Я не уверен, что ваш массив совместим с "$ (твит)",
, если не пытаетесь обернуть твит в

как

$('<p>', {'html': tweet}).css('display', 'none').fadeIn();

Answer 3

Попробуйте что-то вроде этого: http://jsfiddle.net/Rbm7Q/ - пример рабочего кода.

Некоторый код для просмотра можно найти ниже:

$(document).ready(function(){
    var elk = new Array('<p><a href="http://twitter.com/user">user</a>: tweet text 1</p>', '<p><a href="http://twitter.com/user">user</a>: tweet text 2</p>');

function appEl(_id) {
    if (elk[_id] != undefined) {
        $('#testHolder').append(elk[_id]);
        $('#testHolder p:eq(' + _id + ')').hide().fadeIn("slow", function(){
            _id = _id + 1;
            if (elk[_id] != undefined) {
                appEl(_id);
            };
        });
    }
}
appEl(0);
});

Answer 4

Метод fadeIn () ведет себя асинхронно: он ставит анимацию в очередь и сразу же возвращается к вызывающей стороне.Вы можете использовать последний аргумент для предоставления функции обратного вызова, которая будет вызываться после завершения эффекта.

Итак, с небольшим рефакторингом вы можете сделать что-то вроде:

function fadeTweet(tweets, index, displayContainer)
{
    if (index >= tweets.length) {
        return;
    }

    $("<p>" + tweets[i] + "</p>").appendTo(displayContainer).fadeIn("slow",
        function() {
            fadeTweet(tweets, index + 1, displayContainer);
        });
}

fadeTweet(tweetsArray, 0, $(displayContainer));