gpt4 book ai didi

javascript - 在轮播中查看时如何激活 JS 文本动画?

转载 作者:行者123 更新时间:2023-11-28 03:37:50 25 4
gpt4 key购买 nike

如果之前有人问过这个问题,我很抱歉。我对 JS 很陌生,了解有限。

我一直在试图弄清楚如何激事件画。使用我的代码,动画在页面加载的同时加载,我需要在内容可见时加载它。我添加了一个偏移量,但它没有延迟动画,只是没有完全显示它。

var slidetwo = new Array(
"Brief background of who had which children and who got married to who.",
"- Include the Jewish year and the non - Jewish year ie BCE OR CE text two"
);
var Speed = 100;
var Index = 0;
var ArrLength = slidetwo[0].length;
var ScrollAt = 20;

var TextPos = 0;
var Contents = '';
var Row;

function typewriter2()
{
Contents = ' ';
Row = Math.max(0, Index-ScrollAt);
var destination = document.getElementById("unit-two-slide-two");

while ( Row < Index ) {
Contents += slidetwo[Row++] + '<br />';
}
destination.innerHTML = Contents + slidetwo[Index].substring(0, TextPos) + "_";
if ( TextPos++ == ArrLength ) {
TextPos = 0;
Index++;
if ( Index != slidetwo.length ) {
ArrLength = slidetwo[Index].length;
setTimeout("typewriter2()", 500);
}
} else {
setTimeout("typewriter2()", Speed);
}
}

$(function() {
$('#unit-two-slide-two').each(function(){
$(this).waypoint(function() {
$(this).addClass('show');
}, {
offset: '100px',
horizontal: true
});
});
});


typewriter2();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="unit-221-1slide-top">
<p>After Yaakov received the blessings from his father, his brother Esav wanted to kill him. Yaakov forced to run away to the home of Lavan his uncle in Haran. Yaakov lived with Lavan for 22 years and married his two daughters and the two maid servants.</p>
</div>

<link rel="stylesheet" type="text/css"/>

<body>
<div id="unit-two-slide-two"></div>
</body>

最佳答案

typewriter2(); 更改为:

$( "#unit-two-slide-two").load(typewriter2);

一旦 DOM 发出已加载信号,这将触发您的函数。

关于javascript - 在轮播中查看时如何激活 JS 文本动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57556353/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com