typed.js không hoạt động cho lần thử thứ hai

Question

Lần thử đầu tiên để di chuột div.logo hoàn tất thành công và typed.js nhập câu. Sau đó, khi di chuột trở lại trên div.logo, tính năng này không hoạt động và không nhập bất kỳ thứ gì.

<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

Như bạn có thể nhìn thấy trong source code for typed.js, hàm typed() gán một số dữ liệu đến các yếu tố mục tiêu, và từ chối để chạy nếu dữ liệu đó được thiết lập:

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

Vì vậy, bạn phải bỏ cài nó trước gọi typed() hai lần:

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

Answer 2

tôi nhận thấy rằng câu trả lời của Andrea trong khi làm việc trong trường hợp của bạn, nó sẽ lộn xộn ảnh hưởng (làm cho nó quá jag ged) khi được sử dụng với một mảng chuỗi có nhiều phần tử.

Nếu ai đó phải đối mặt với cùng một vấn đề như tôi đã làm, họ có thể có thể làm những gì tôi đã làm.

Tôi đã sử dụng bộ đếm để kiểm tra xem typed.js có được gọi lần thứ hai và được thêm lại hay không .logo h3 khi hoàn tất.

Vì vậy, tôi đã thêm trình bao bọc.

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

và sau đó thực hiện

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