我正在使用一个名为Letter js的插件，使用html jQuery和CSS为四段设置动画。
该插件效果很好，但我有一个问题是试图延迟每个段落的动画，即段落1应该在1秒后开始，段落2应该在2秒后开始，其他词语使每个段落逐渐显示。
我尝试在内容之后添加延迟功能但是没有用，有人可以帮忙吗？
// The plugin js (l-by-l.min.js) file is the following:
! function(e) {
e.fn.lbyl = function(n) {
{
var t = e.extend({
content: "",
speed: 10,
type: "fade",
fadeSpeed: 500,
finished: function() {}
}, n),
d = e(this),
s = [],
i = t.content;
e(this).length
}
d.empty(), d.attr("data-time", i.length * t.speed);
for (var p = 0; p < i.length; p++) s.push(i[p]);
e.each(s, function(e, n) {
d.append('<span style="display: none;">' + n + "</span>"), setTimeout(function() {
"show" == t.type ? d.find("span:eq(" + e + ")").show() : "fade" == t.type && d.find("span:eq(" + e + ")").fadeIn(t.fadeSpeed)
}, e * t.speed)
}), setTimeout(function() {
t.finished()
}, i.length * t.speed)
}
}(jQuery);
// My Script is the following:
jQuery(document).ready(function($) {
$(".welcome_Text1_dk").lbyl({
content: "this is paragraph one",
speed: 100, //time between each new letter being added
type: 'fade', // 'show' or 'fade'
fadeSpeed: 500, // Only relevant when the 'type' is set to 'fade'
finished: function() {
console.log('finished')
} // Finished Callback
})
});
jQuery(document).ready(function($) {
$(".welcome_Text2_dk").lbyl({
content: "this is paragraph two",
speed: 100, //time between each new letter being added
type: 'fade', // 'show' or 'fade'
fadeSpeed: 500, // Only relevant when the 'type' is set to 'fade'
finished: function() {
console.log('finished')
} // Finished Callback
})
});
jQuery(document).ready(function($) {
$(".welcome_Text3_dk").lbyl({
content: "this is paragraph three",
speed: 100, //time between each new letter being added
type: 'fade', // 'show' or 'fade'
fadeSpeed: 500, // Only relevant when the 'type' is set to 'fade'
finished: function() {
console.log('finished')
} // Finished Callback
})
});
jQuery(document).ready(function($) {
$(".welcome_Text4_dk").lbyl({
content: "this is paragraph four",
speed: 100, //time between each new letter being added
type: 'fade', // 'show' or 'fade'
fadeSpeed: 500, // Only relevant when the 'type' is set to 'fade'
finished: function() {
console.log('finished')
} // Finished Callback
})
});#home_dk {
width: 100%;
height: 100vh;
background: #fff;
background-attachment: fixed;
display: flex;
flex-direction: column;
justify-content: center;
}
#welcome_Text_Wrapper_dk {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
.welcome_Text1_dk,
.welcome_Text2_dk,
.welcome_Text3_dk {
color: #b6b69c;
font-size: 2.6em;
font-family: "SuperGroteskWebPro-Bold W01 Rg";
text-transform: uppercase;
text-align: left;
line-height: 1em;
}
.welcome_Text4_dk {
color: #b6b69c;
font-size: 2.6em;
font-family: 'FF_Super_Grotesk';
text-transform: uppercase;
text-align: left;
line-height: 1em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home_dk">
<article id="welcome_Text_Wrapper_dk">
<div class="welcome_Text1_dk"></div>
<div class="welcome_Text2_dk"></div>
<div class="welcome_Text3_dk"></div>
<div class="welcome_Text4_dk"></div>
</article>
</div>
答案 0 :(得分：2)
// The plugin js (l-by-l.min.js) file is the following:
! function(e) {
e.fn.lbyl = function(n) {
{
var t = e.extend({
content: "",
speed: 10,
type: "fade",
fadeSpeed: 500,
finished: function() {}
}, n),
d = e(this),
s = [],
i = t.content;
e(this).length
}
d.empty(), d.attr("data-time", i.length * t.speed);
for (var p = 0; p < i.length; p++) s.push(i[p]);
e.each(s, function(e, n) {
d.append('<span style="display: none;">' + n + "</span>"), setTimeout(function() {
"show" == t.type ? d.find("span:eq(" + e + ")").show() : "fade" == t.type && d.find("span:eq(" + e + ")").fadeIn(t.fadeSpeed)
}, e * t.speed)
}), setTimeout(function() {
t.finished()
}, i.length * t.speed)
}
}(jQuery);
// My Script is the following:
jQuery(document).ready(function($) {
// create an array of paragraphs
var myParagraphs = [{
selector: ".welcome_Text1_dk",
content: "this is paragraph one"
}, {
selector: ".welcome_Text2_dk",
content: "this is paragraph two"
}, {
selector: ".welcome_Text3_dk",
content: "this is paragraph three"
}, {
selector: ".welcome_Text4_dk",
content: "this is paragraph four"
}];
// loops it
for (let i = 0; i < myParagraphs.length; i++) {
setTimeout(function() {
$(myParagraphs[i].selector).lbyl({
content: myParagraphs[i].content,
speed: 100, //time between each new letter being added
type: 'fade', // 'show' or 'fade'
fadeSpeed: 500, // Only relevant when the 'type' is set to 'fade'
finished: function() {
console.log('finished')
} // Finished Callback
});
}, 1000 * i);
}
});#home_dk {
width: 100%;
height: 100vh;
background: #fff;
background-attachment: fixed;
display: flex;
flex-direction: column;
justify-content: center;
}
#welcome_Text_Wrapper_dk {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
.welcome_Text1_dk,
.welcome_Text2_dk,
.welcome_Text3_dk {
color: #b6b69c;
font-size: 2.6em;
font-family: "SuperGroteskWebPro-Bold W01 Rg";
text-transform: uppercase;
text-align: left;
line-height: 1em;
}
.welcome_Text4_dk {
color: #b6b69c;
font-size: 2.6em;
font-family: 'FF_Super_Grotesk';
text-transform: uppercase;
text-align: left;
line-height: 1em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home_dk">
<article id="welcome_Text_Wrapper_dk">
<div class="welcome_Text1_dk"></div>
<div class="welcome_Text2_dk"></div>
<div class="welcome_Text3_dk"></div>
<div class="welcome_Text4_dk"></div>
</article>
</div>
答案 1 :(得分：1)
您可以使用setTimeout()功能。
jQuery(document).ready(function($) {
// run first one here
setTimeout(function(){
// do the second one here
}, 1000); // in milliseconds; 1 second
setTimeout(function(){
// do the third one
}, 2000); // in milliseconds; 2 second
setTimeout(function(){
// do the fourth one here
}, 3000); // in milliseconds; 3 second
// etc.
});