1

这是我的代码。由于某种原因，整个字符串一次淡入而不是每个单独的字符。我的 console.log 显示字符正在被一一执行。为什么整个字符串会同时消失？for 循环中的语句不应该为每个字符执行吗？

<!DOCTYPE html>
<head>
  <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
  <script>
    $(function() {
      string = " David";
      for(i = 0; i < string.length; i++) {
        $('#fadeIn').append(string[i]).delay(1000).hide().fadeIn(1000);
        console.log(string[i]);
      }
    });
  </script>
</head>
<body>
<div id="fadeIn" style="color: #000"></div>
</body>
</html>
4

3 回答 3

4

要让单个字母淡入，它们需要是 DOM 元素。

$(function() {
  var string = " David";
  var q = jQuery.map(string.split(''), function (letter) {
    return $('<span>'+letter+'</span>');
  });

  var dest = $('#fadeIn');

  var c = 0;
  var i = setInterval(function () {
    q[c].appendTo(dest).hide().fadeIn(1000);
    c += 1;
    if (c >= q.length) clearInterval(i);
  }, 1000);

});

http://jsfiddle.net/bGsa3/5/

于 2013-08-13T16:44:01.213 回答
2

for 循环同时执行所有字母的延迟、追加和淡入，因此它们将同时显示。您想使用 setInterval 来执行此操作：

var string = "David",
stringCount = 0;

setInterval(function(){
  $('#fadeIn').append(string[stringCount]);
  stringCount += 1;
},1000);

工作小提琴：http: //jsfiddle.net/bGsa3/

于 2013-08-13T16:24:18.660 回答
0

我考虑了一会儿，并相信这会更好地服务$.Deferred() 这允许动画成为你想要的任何东西，如果你改变它，它不会影响其余部分 - 动画控制时间，触发“完成”和通过触发自定义事件在完成时开始下一个字母。

没有什么花哨的，只是按照你的要求去做。

简单标记：

<div id="animator"></div>

例如：

var myString = " Freddy The Mark";
var i = 0;  // used to iterate the string, could be done other ways
var myEffect = function (c) {
    return $("#animator").append(c).fadeIn(800).delay(800).fadeOut(1);
};
$("#animator").on("show", function () {
    var c = myString[i];
    $.when(myEffect(c)).done(function () {
        i++;
        if (i < myString.length) {
            $('#animator').trigger('show');
        } else {
            $("#animator").show();//show it when we are done
        }
    });
});
$('#animator').trigger('show'); //get started by firing the custom event handler

将它们放在一个示例中：http: //jsfiddle.net/N8eRN/1/

于 2013-08-13T20:26:27.883 回答