Question

首次尝试悬停 div.logo 成功完成， typed.js 输入句子。之后，当再次悬停在 div.logo 上时，它无法正常工作且无法输入任何内容。

    <script type="text/javascript">
    $( ".logo" ).hover(function() {
        $(this).toggleClass("clicked");
        if ($('.logo').hasClass('clicked')){
              $(function(){
                $('.logo').css('background-position','-20vmin center');
                console.log("n");
                  $(".logo h3").typed({
                    strings: ["Phoenix ^250 Programming ^250 Team"],
                    typeSpeed: 75
                  });
              });
        }
        else{
            $('.logo').find( "h3" ).text("");
            $('.logo span').remove();
            $('.logo').css('background-position','center left+1.5vmin');
        }
    });
    </script>

Answer 1

正如您在source code for typed.js中看到的，函数typed()将一些数据分配给目标元素，并且如果设置了这样的数据则拒绝运行：

var $this = $(this),
    data = $this.data('typed'), // <<<
    options = typeof option == 'object' && option;
if (!data) // <<<
    $this.data('typed', (data = new Typed(this, options)));

因此，在调用typed()两次之前，您必须取消设置：

$('.logo h3')
    .data('typed', null) // <<<
    .typed({
        strings: ["Phoenix ^250 Programming ^250 Team"],
        typeSpeed: 75
    });

Answer 2

我注意到安德里亚在你的情况下的答案，当与一个包含多个元素的字符串数组一起使用时，它会使效果混乱（使其变得过于锯齿状）。

如果有人遇到和我一样的问题，他们可能会做我做的事情。

我使用计数器来检查是否第二次调用了typed.js并在完成时重新添加了.logo h3。

所以，我添加了一个包装器。

<div class="wrapper">
<div class="logo"><h3></h3></div>
<div>

然后实施

 if(counter==1){
 $(".logo h3").typed({
        strings: stringArrayWithManyElements,
        typeSpeed: 75
      });
}
else{
    $('wrapper').html('');
    $(".logo h3")
    .typed({
        strings: stringArrayWithManyElements,
        typeSpeed: 75
      });
}

typed.js不适用于第二次尝试

2 个答案: