使用JQuery淡入字符串字符? [英] Fade In String Characters with JQuery?

查看:66
本文介绍了使用JQuery淡入字符串字符?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是我的代码.由于某种原因,整个字符串会一次淡入,而不是每个单独的字符都淡入.我的console.log显示字符正在一个接一个地执行.为什么整个字符串一次消失? for循环中的语句是否应针对每个字符执行?

Here is my code. For some reason the entire String fades in at one time instead of each individual character. My console.log shows the characters are being executed one by one. Why is the entire string fading in at one time? Shouldn't the statement within the for loop execute for each character?

<!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>

推荐答案

要使各个字母淡入,它们必须是DOM元素.

To get the individual letters to fade in, they need to be DOM elements.

$(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/

这篇关于使用JQuery淡入字符串字符?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆