typed.js在第二次嘗試中不起作用

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

如您在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

我注意到，Andrea的答案在您的情況下有效，當與具有多個元素的字符串數組一起使用時，會弄亂效果（使其參差不齊）。

如果有人遇到與我相同的問題，他們可能會做我所做的事情。

我使用了一個計數器來檢查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
      });
}