我试图获取 all_msg 的文本，并使用 hide 方法隐藏它，然后一次淡入一个字母，有一点延迟，这是我的代码。
var $all_msg = $('#welcome_msg');
function animate(i) {
$all_msg.hide();
$all_msg.text.each(function(index) {
$(this).delay(700 + index).fadeIn(1100);
})
}
这就是控制台返回给我的信息：
$all_msg.text.each is not a function
我是一名新编码员，如果有人可以帮助我，这将给我很大的推动，谢谢。
你需要检索文本.text()，然后用您选择的分隔符（空格来获取单词列表，或空字符串来获取字符列表）分割它，然后为列表中的每个项目创建一个范围，并将其附加到您的容器上页面（如果需要的话可以淡出它们）：
$(function() {
//get the welcome msg element
var $all_msg = $('#welcome_msg');
//get a list of letters from the welcome text
var $wordList = $('#welcome_msg').text().split("");
//clear the welcome text msg
$('#welcome_msg').text("");
//loop through the letters in the $wordList array
$.each($wordList, function(idx, elem) {
//create a span for the letter and set opacity to 0
var newEL = $("<span/>").text(elem).css({
opacity: 0
});
//append it to the welcome message
newEL.appendTo($all_msg);
//set the delay on the animation for this element
newEL.delay(idx * 70);
//animate the opacity back to full 1
newEL.animate({
opacity: 1
}, 1100);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcome_msg">Welcome to the example snippet</div>
UPDATE:
这是一个在欢迎文本中注意标记的片段：
$(function() {
//get the welcome msg element
var $all_msg = $('#welcome_msg');
//get a list of letters from the welcome text
var $wordList = $('#welcome_msg').html().split("");
//clear the welcome text msg
$('#welcome_msg').html("");
//loop through the letters in the $wordList array
var tagGoing = "";
$.each($wordList, function(idx, elem) {
if (elem == "<") {
//if we encountered this symbol it means a tag started
tagGoing += elem;
} else if (elem == ">") {
//if we encountered this symbol it means a tag closed
tagGoing += elem;
//create the tag from the collected parts and append it
//to the output html:
var $foundTag = $(tagGoing).appendTo($all_msg);
$foundTag.css({
opacity: 0
});
$foundTag.delay(idx * 70);
$foundTag.animate({
opacity: 1
}, 1100);
//reset the tag collector:
tagGoing = "";
} else {
//if we are inside a tag
if (tagGoing != "") {
//if we are inside a tag, then just append the
//current character to the output html
tagGoing += elem;
} else {
//create a span for the letter and set opacity to 0
var newEL = $("<span/>").text(elem).css({
opacity: 0
});
//append it to the welcome message
newEL.appendTo($all_msg);
//set the delay on the animation for this element
newEL.delay(idx * 70);
//animate the opacity back to full 1
newEL.animate({
opacity: 1
}, 1100);
}
}
});
});
.banana {
width: 100px;
height: 100px;
display: block;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcome_msg">Welcome to the
<br/>example
<div class="banana"></div>snippet</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
