Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 958
kavian Avatar asked Oct 19 '22 04:10

kavian


1 Answers

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
    });
like image 128
Andrea Corbellini Avatar answered Oct 28 '22 15:10

Andrea Corbellini