Question

我正在使用jquery处理某种推特新的自动收报机，而且我仍然坚持视觉效果。我想要显示的所有推文都被格式化为存储在数组中的字符串。字符串是这样的：

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

我想将段落一次添加到容器DIV中，有一些淡入效果，就像您点击按钮时在示例中得到的那样： http://jsbin.com/uneso（例如来自here）。

我尝试过使用示例中的代码，我写了这个：

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

但看起来所有追加都是一起完成的，然后将一个fadeIn（）效果应用于整个div。

知道为什么会这样吗？

提前致谢，马塞罗

P.S。我也试过看this，但我仍然无法解决我的问题。

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);
    }
  }
}

Live copy

请注意我们如何使用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);
  }
}

Live copy

Answer 2

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));

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（）应该应用于附加的段落。

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

我不确定你的阵列是否兼容“$（tweet）”，
如果没有尝试将推文包装在＆lt; p＆gt;喜欢

$('&lt;p&gt;', {'html': tweet}).css('display', 'none').fadeIn();

新段落淡出

4 个答案: