Хотел написать пользовательскую функцию printContent, которая делала бы анимацию для любой span. Однако запустив её несколько раз она не работает. А работает только если она в коде применяется только один раз? Почему, как её перенастроить? Подскажите, плиз.
<html>
<title></title>
<head>
<span id="span1"></span>
<span id="span2"></span>
</head>
<body>
<script src="script.js"></script>
<script>
printContent("span1", str);
//document.getElementById("span1").style.width = document.body.clientWidth;
printcontent("span2", str2);
</script>
</body>
</html>
// global variable to store content
var str = "Content1. Content1.Content1.Content1.Content1.Content1.Content1.Content1.Content1.";
var str2 = "Content2. Content2.Content2.Content2.Content2.Content2.Content2.Content2.Content2.Content2.Content2.";
// variable to store length of content
length = str.length;
// global variable to stop window method setInterval
var stop;
// global variable counter
var counter = 0;
// global variable to place content to the left
var left = 0;
// global font variable
var font = 0;
// global variable for borderTopColor
// global variables to store position values
var x = 0;
y = 0;
var a = 0;
var b = 0;
var c = 0;
var stopf = 0;
function printContentImplementation(span, string){
var gs = document.getElementById(span);
gs.style.fontFamily = "Arial";
gs.style.fontWeight = "Arial";
gs.style.fontVariant = "small-caps";
gs.style.position = "absolute";
if(counter == string.length-1){
gs.style.borderTop = "5px solid rgb(0,0,0)";
gs.style.borderBottom = "1px solid rgb(0,0,0)";
gs.style.backgroundColor = "rgb(255,255,255)";
//gs.style.top = window.innerHeight - 100;
var stop2 = window.setInterval(
function(){
if(y == 100){
window.clearInterval(stop2);
stop2 = null;
}
gs.style.top = y+"px";
y++;
}, 10
);
window.clearInterval(stop);
stop = null;
stopf = 1;
}
gs.innerHTML += string[counter];
gs.style.color = "rgb(0,0,0)";
gs.style.left = x+"px";
counter++;
x++;
}
function printContent(span, string){
if(stopf == 0){
stop = window.setInterval(
function()
{
printContentImplementation(span, string)
},
10
);
}
}