javascript - 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

正如您在 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
    });