javascriptjquerycsstyped

typed.js doesn't work for the second attempt


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>

Solution

  • 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
        });