简朴的笔墨打印机 结果
很久没写过 juqey, 看雇用信息 内里都是 什么 通晓jquey、 react、 vue 诸如此类。。。
通晓离我很远, 闇练也不敢说。 也就是简简朴单的貌似控制。
瞥见一个博客里的结果, 倏忽本身想完成。 简简朴单 写个 jquery 插件。
给jquery 增添 fadeText 要领
参数 options
options.time 时候 笔墨插进去距离
options.text 待插进去的笔墨
options.fn // 为 fn 供应 三个 参数函数 (stopFadeText, goOn, end)
stopFadeText 住手笔墨渐进结果
goOn 恢复笔墨渐进结果
end 完毕 笔墨渐进结果, 马上到渐进结果末了一帧。
$.fn.extend({
fadeText (options) {
var time = options.time || 200
var text = options.text.toString()
var fn = options.fn || function () {}
// 当前字符串 下标
var index = 0
// 字符串 总长度
var length = text.length
// 纪录定时器 id 的
var k = null
// 纪录 this
var that = this
console.log(fn)
var fadeText = function () {
index ++;
k !== null && clearTimeout(k)
console.log(text.substr(0, index))
//裁切 text 从第一位最先 长度为 index 的字符串
that.text(text.substr(0, index))
console.log($(that))
if (index > length - 1)
return
k = setTimeout(fadeText, time)
}
var stopFadeText = function () {
clearTimeout(k)
k = null
}
var goOn = function () {
if ( k !== null) {
index --
fadeText()
}
}
var end = function () {
clearTimeout(k)
that.text(text.substr(0, length - 1))
}
fadeText()
fn(stopFadeText, goOn, end)
return this
}
})