Javascript Jquery逐字淡入效果

我一直在寻找这个确切的脚本有一段时间了，我无法让它工作。我希望使用从左到右逐字的淡入效果

比如说

 <div class="box5">
      <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus
      </h1>                 
</div>

然后JS

function replaceAllInstances(source, search, replacement) {
    var regex = new RegExp(search, "g");
    var result = source.replace(regex, replacement);
    return result;
}

$.fn.isOnScreen = function (x, y) {

    if (x == null || typeof x == 'undefined')
        x = 1;
    if (y == null || typeof y == 'undefined')
        y = 1;

    var win = $(window);

    var viewport = {
        top: win.scrollTop(),
        left: win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var height = this.outerHeight();
    var width = this.outerWidth();

    if (!width || !height) {
        return false;
    }

    var bounds = this.offset();
    bounds.right = bounds.left + width;
    bounds.bottom = bounds.top + height;

    var visible = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

    if (!visible) {
        return false;
    }

    var deltas = {
        top: Math.min(1, (bounds.bottom - viewport.top) / height),
        bottom: Math.min(1, (viewport.bottom - bounds.top) / height),
        left: Math.min(1, (bounds.right - viewport.left) / width),
        right: Math.min(1, (viewport.right - bounds.left) / width)
    };

    return (deltas.left * deltas.right) >= x && (deltas.top * deltas.bottom) >= y;

};

/*
 * Init specified element so it can be gradually revealed.
 *
 * Limitations:
 *  Only works on backgrounds with a solid color.
 *
 *  @param options = {
 *       id:'box3'
 *      ,background='#ffffff' //default
 *      ,delay='0' //default
 *  }
 *
 */
$.fn.initReveal = function (options) {
    console.log('-------------');
    console.log('selector:' + this.selector);
    var parent = $(this).parent();

    //grab a copy of the contents, then remove it from DOM
    var contents = $(this).clone();
    $(this).empty();

    var revealHtmlBlock = "<div class='reveal'> <div class='text reveal__inner reveal__inner-{class}'> </div> <div class='reveal__cover reveal__cover-{class}'> <div class='reveal__cover-section reveal__100'></div> <div class='reveal__cover-section reveal__90'></div> <div class='reveal__cover-section reveal__80'></div> <div class='reveal__cover-section reveal__70'></div> <div class='reveal__cover-section reveal__60'></div> <div class='reveal__cover-section reveal__50'></div> <div class='reveal__cover-section reveal__40'></div> <div class='reveal__cover-section reveal__30'></div> <div class='reveal__cover-section reveal__20'></div> <div class='reveal__cover-section reveal__10'></div> </div> </div>";
    revealHtmlBlock = replaceAllInstances(revealHtmlBlock, "{class}", options.id);

    $(revealHtmlBlock).appendTo(parent);
    contents.appendTo($('.reveal__inner-' + options.id));

    //handle options

    //delay
    if (options.delay === undefined) {
        console.log('delay set to 0');
        options.delay = 0; //set default
    } else {
        console.log('delay set to:' + options.delay);
    }
    var revealElementFunction = function (options) {
        $(this).performReveal(options);
    };

    //background
    if (options.background !== undefined) {
        $('.reveal__cover-' + options.id + ' .reveal__cover-section').css({'background-color': options.background});
    }

    //trigger the reveal at the specified time, unless auto is present and set to false
    if (options.auto === undefined || (options.auto !== undefined && options.auto)) {
        setTimeout(function () {
            console.log('call');
            revealElementFunction(options);
        }, options.delay);
    }

    //trigger on-visible
    if (options.trigger !== undefined) {
        var revealOnScreenIntervalIdMap = {};
        function uncoverText() {
            var onscreen = $('.reveal__inner-box4').isOnScreen();
            if ($('.reveal__inner-' + options.id).isOnScreen()) {
                $('.reveal__cover-' + options.id).addClass('reveal__uncovered');
                revealOnScreenIntervalIdMap[options.id] = window.clearInterval(revealOnScreenIntervalIdMap[options.id]);
            }
        }
        function showTextWhenVisible() {
            revealOnScreenIntervalIdMap[options.id] = setInterval(uncoverText, 800);
        }
        showTextWhenVisible();
    }

};

//--------------------
/*
 * trigger options:
 * immediately (on page load)
 * on event, eg. onclick
 * on becoming visible, after it scrolls into view, or is displayed after bein ghidden
 *
 *  @param options = {
 *       id:'box3'
 *  }
 *
 */
$.fn.performReveal = function (options) {
    var _performReveal = function () {
        $('.reveal__cover-' + options.id).addClass('reveal__uncovered');
    };
    //allow time for init code to complete
    setTimeout(_performReveal, 250);
};

---

有没有人知道如何让它一个字一个字地工作，而不是一行一行地工作。它会创建所需的跨距，并根据设置的间隔值淡入

var fadeInterval = 300

$('h1').html(function(_, txt){
    var words= $.trim(txt).split(' ');
    return  '<span>' + words.join('</span> <span>') + '</span>';
}).find('span').each(function(idx, elem){        
    $(elem).delay(idx * fadeInterval).fadeIn();
});

var fadeInterval=300
$（'h1'）.html（函数（x，txt）{
var words=$.trim（txt）.split（“”）；
返回“”+单词。连接（“”）+“”；
}).find（'span'）。每个（函数（idx，elem）{
$（elem）.delay（idx*fadeInterval.fadeIn（）；
});

---

答案是如何将每个单词都用

包装起来，然后逐渐消失。这一定是一种更简单的方法，我已经知道我可以把它隔开，但是每个单词都会同时消失，我必须用不同的时间来计时。不，你不能在文本节点中处理单个单词这是一个很好的练习：这将是一个非常好的堆栈片段示例：@Nenotlep请随意创建它，老实说，我更喜欢使用其他工具，如fiddle或plunker，因为它们更灵活，可以处理绝对好这正是我想要的，非常感谢。

.reveal {
    position: relative;
    overflow: hidden;
}

/*initial - hidden*/
.reveal .reveal__cover {
    position: absolute;
    top: 0;
    left: -250px;
    height: 100%;
    margin: 2px;
    width: calc(100% + 250px);
}

.reveal .reveal__cover.reveal__uncovered {
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    width: calc(100% + 250px);
    margin: 2px;
    transition: left 2500ms ease-out 0ms;
}

.reveal__cover-section {
    height: 100%;
    float: right;
    /* NOTE: Background must match existing background */
    /*background: #000;*/
    background: #fff;
    width: 2%;
}

.reveal__10 {
    opacity: 0.1;
}

.reveal__20 {
    opacity: 0.2;
}

.reveal__30 {
    opacity: 0.3;
}

.reveal__40 {
    opacity: 0.4;
}

.reveal__50 {
    opacity: 0.5;
}

.reveal__60 {
    opacity: 0.6;
}

.reveal__70 {
    opacity: 0.7;
}

.reveal__80 {
    opacity: 0.8;
}

.reveal__90 {
    opacity: 0.9;
}

.reveal__100 {
    opacity: 1;
    width: 82%;
}

var fadeInterval = 300

$('h1').html(function(_, txt){
    var words= $.trim(txt).split(' ');
    return  '<span>' + words.join('</span> <span>') + '</span>';
}).find('span').each(function(idx, elem){        
    $(elem).delay(idx * fadeInterval).fadeIn();
});