打字机和设定持续时间

时间:2017-01-13 19:12:52

标签: javascript jquery html css string

我想在HTML / JavaScript / jQuery中使用打字机效果,例如this one,但我需要指定动画的持续时间总和。例如,如果我设置10秒并且字符串是“dog”,则动画将非常慢。这可能吗?感谢。

2 个答案:

答案 0 :(得分:1)

您可以修改现有插件,以添加接受totalDelay参数的新功能,然后将typeString函数与delay = totalDelay / str.length一起使用。< / p>

答案 1 :(得分:1)

我将使用与this one中相同的功能。

这很简单。

在线typeString($tar, settings.text[idx], 0, settings.delay, function () {和在线deleteString($tar, settings.delay, function () {上更改settings.delay (settings.delay / settings.text[idx].length),然后在调用构造函数时,按照您想要的时间传递延迟(以毫秒为单位)选项。 e.g:

    $('#target').teletype({
      delay: 10000,
      text: [
        'dog',
        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
        'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
        'magna aliquyam erat, sed diam voluptua. At vero eos et',
        'accusam et justo duo dolores et ea rebum. Stet clita kasd',
        'gubergren, no sea takimata sanctus est Lorem ipsum dolor         sit',
        'amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
        'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
        'magna aliquyam erat, sed diam voluptua. At vero eos et         accusam',
        'et justo duo dolores et ea rebum. Stet clita kasd gubergren,',
        'no sea takimata sanctus est Lorem ipsum dolor sit amet.'
      ]
    });`