Văn bản xóa bằng Jquery với hiệu ứng loại

Question

Tôi viết một số tập lệnh để thêm văn bản có hiệu ứng nhập văn bản. Tôi cần phải loại bỏ văn bản như hiệu ứng đó nhưng không biết làm thế nào để làm điều đó. Nếu có thể vui lòng giúp đỡ.

Mã JS:

var title = $(".form-title").attr("data-title"); 

$.each(title.split(''), function (i, letter) { 
    setTimeout(function() { 
     console.log(letter); 
     $('.form-title').html($('.form-title').html() + letter); 
    }, 500 * i); 
}); 

JSFIDDLE

Answer 1

Bạn có thể cắt lá thư cuối cùng của nội dung HTML với mỗi lần lặp.

Ví dụ:

$('.form-title').html($('.form-title').html().substring(0, title.length-1-i)); 

https://jsfiddle.net/ecvbL0f7/2/

Answer 2

sử dụng javascript sau. Kiểm tra các bản demo cũng ở bên dưới

var title = $(".form-title").attr("data-title"); 
 

 
$.each(title.split(''), function (i, letter) { 
 
    setTimeout(function() { 
 
    \t \t if(title.length-i!=1) { 
 
     $('.form-title').html(title.substring(0,title.length-i)); 
 
      } else { 
 
      $('.form-title').html(title.substring(0,title.length-i)); 
 
      setTimeout(function() { 
 
       $('.form-title').html(""); 
 
       },500); 
 
      } 
 
    }, 500 * i); 
 
    
 
}); 
 
$('.form-title').html("")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h2 class="form-title" data-title="Dear Concept Studio,"></h2>

Answer 3

Nếu bạn đã có các văn bản:

<h2 class="form-title">Dear Concept Studio</h2> 

Sau đó, bạn sẽ loại bỏ nó với điều này:

var H2 = $("h2"); 
var H2Length = H2.text().length; 

$.each(H2.text().split(''), function (i, letter) { 
    setTimeout(function() { 
     console.log(H2.text().substring(0,H2Length-1)); 
     H2.text(H2.text().substring(0,H2Length-1)); 
     H2Length--; 
    }, 500 * i); 
}); 

Answer 4

Có bạn đi, một đoạn trích cho bạn:

var 
    $title = $("h2"); 


var func = function() { 

    $title.text($title.text().substring(0, $title.text().length - 1)); 

    if ($title.text().length > 0) { 
     setTimeout(func, 100); 
    }; 
}; 

func(); 


http://jsfiddle.net/ucvvegay/7/ 

trên jsFiddle

Answer 5

var title = $(".form-title").attr("data-title"); 
 
var interval = 200; 
 
var wait = interval + (interval * title.length); 
 

 
$.each(title.split(''), function (i, letter) { 
 
    setTimeout(function() { 
 
     $('.form-title').html($('.form-title').html() + letter); 
 
    }, interval * i); 
 
}); 
 
var i = title.length; 
 
while(i >= 0){ 
 
    setTimeout(function() { 
 
     var text = $('.form-title').html(); 
 
     var length = text.length - 1; 
 
     $('.form-title').html(text.substring(0, length)); 
 
    }, wait + (interval * i)); 
 
    i--; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<h2 class="form-title" data-title="Dear Concept Studio,"></h2>

Answer 6

Hãy thử như thế này,

var title = $(".form-title").attr("data-title"); 
var leng = title.split('').length-1; 
$.each(title.split(''), function (i, letter) { 
setTimeout(function() { 
    // console.log(letter); 
    if(i===leng){deleting()} 
    $('.form-title').html($('.form-title').html() + letter); 
}, 500 * i);  

}); 
function deleting(){ 
var text = $('.form-title').html();  
var length = text.length-1; 
$.each(text.split(''),function(i,letter){   
    setTimeout(function() {       
    $('.form-title').html(text.substring(0,length-i)); 
},500*i); 
}); 
} 

https://jsfiddle.net/ucvvegay/9/