好吧,让我们看看这是否有意义。我仍然是一个新手,我试图保持简单,以便我理解该过程的每一步。
我想做的事情:目前我对文本 block 有打字机效果。一旦完成“打字”,我希望能够使当前文本淡出,并以相同的打字效果开始下一个文本 block 。我已经成功为其他页面编写了这个顺序淡入效果,但我不知道如何将两者结合起来。
JQuery 脚本: 我在其他页面上使用的顺序 fadeIn 脚本如下所示:
$('.wrapper').on('click', function () {
var currentText = $('.active');
var next = currentText.next('p');
if (next.length > 0) {
currentText.fadeOut(400).removeClass('active');
next.delay(200).fadeIn(1100).addClass('active');
}
});
});
这也是我在打字机功能中使用的:
var text = $(".typeText").text();
$.each(text.split(''), function (i, letter) {
setTimeout(function () {
$('.typewriter').html($('.typewriter').html() + letter);
}, 50 * i);
});
但是,当我尝试将两者结合起来(例如 var text=$('.typeText .active'
)时,它根本不起作用。每次点击时“清除” .typewriter div 并从“typeText”类重新获取文本内容的最佳方法是什么?
这是我用我的(非工作)代码设置的 JSFiddle(如果有帮助的话)。 http://jsfiddle.net/tuckyeah/tp42qqp9/7/
谢谢!!!
最佳答案
这是你想要的吗?
http://jsfiddle.net/OxyDesign/jd1Lwjyo/
JS
$(document).ready(function () {
var typing = false;
$('.wrapper').on('click', function () {
typeIn();
});
function typeIn(){
if(typing) return;
var currentText = $('.typeText.active');
var text = currentText.text();
var next = currentText.next('.typeText');
var typeWriter = $('.typewriter');
typing = true;
if (currentText.length > 0) {
typeWriter.fadeOut(400,function(){
var textSplit = text.split(''),
textLgth = textSplit.length;
typeWriter.html('').show();
$.each(textSplit, function (i, letter) {
setTimeout(function () {
typeWriter.html(typeWriter.html() + letter);
if(textLgth-1 === i) typing = false;
}, 500 * i);
});
});
if(next.length) next.addClass('active');
currentText.removeClass('active');
}
}
typeIn();
});
关于javascript - 堆叠打字效果和淡入效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26145509/