我正在出于自己的目的更改动画代码,无法从div获取文本以对其进行动画处理。
原始动画:
https://codepen.io/Lunoware/pen/gjYjBw
我的代码(我删除了输入,脚本的不正确部分和“ if”指令)
<div class="container">
<div class="row">
<p id="text">Test</p>
</div>
</div>
的CSS
@background: #0bc020;
#text{
font-size: 2.5em;
font-weight: bold;
transition-duration: 1.5s;
.char-outer-space{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
}
.char-outer{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 5px;
.char-inner{
position: absolute;
animation-name: jumping;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
left:0px;
top:-15px;
}
}
}
}
@keyframes jumping {
from {
transform: translate(0, 8px);
}
to {
transform: translate(0, -0px);
}
}
jQuery的
jQuery(document).ready(function(){
function splitHtmlString(text){
var string = '#text';
var charArr = string.split("");
var fixedString = "";
charArr.forEach(function(char, index) {
var offset = -index/10;
if(char != " "){
fixedString += "<span class='char-outer' style='animation-delay:" + offset + "s;'><span class='char-inner' style='animation-delay:" + offset + "s;'>" + char + "</span></span>";
}else{
fixedString += "<span class='char-outer-space'></span>";
}
});
$("#text").html(fixedString);
}
splitHtmlString("");
});
我需要从div中获取文本的行
最佳答案
您可以在W3schools中找到更多参考
//get value as html
$('#text').html()
//get value as text
$('#text').text()