typed.js在第二次尝试中不起作用

Question

The first attempt to hover div.logo finish successfully and typed.js types the sentence. After that, when hover again on div.logo it doesn't work and doesn't type anything.

    <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

As you can see in the source code for typed.js , the function typed() assigns some data to the target element, and refuses to run if such data is set:

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

Therefore you have to unset it before calling typed() twice:

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

Answer 2

I noticed that Andrea's answer while worked in your case, it would mess the effect (make it too jagged) when used with a string array with multiple elements.

If someone faces the same problem as I did, they probably could do what I did.

I used a counter to check if typed.js is called for second time and re-added .logo h3 when done so.

So, I added a wrapper.

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

and then implemented

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