Jquery cancella il testo con effetto tipo

Scrivo alcuni script per aggiungere testo con effetto di battitura. Devo rimuovere il testo in questo modo ma non so come farlo. Se puoi, per favore, aiuto.Jquery cancella il testo con effetto tipo

codice 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

fonte

2015-09-10 Aram Mkrtchyan

si vede l'esempio? –

si lo so. Voglio dopo aver aggiunto tutte le lettere, rimuoverlo in quel modo, lettera per lettera dalla fine per iniziare –

sì, so come spiegarlo nella mia lingua. So solo male inglese sorrry –

è possibile tagliare l'ultima lettera del contenuto HTML con ogni iterazione.

Ad esempio:

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

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

fonte

2015-09-10 08:24:58

utilizzare la seguente JavaScript. Controllare la demo anche nel sotto

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>

fonte

2015-09-10 08:26:31

C'è un errore "fuori-per-uno" nel codice. La prima lettera rimane visibile. Vedi la mia risposta. –

Ok ho modificato il mio controllo del codice ora –

@RickViscomi Nella tua risposta l'ultima lettera (,) scompare senza l'intervallo di tempo (intendo all'inizio del carico di lavoro stesso) –

Se hai già avuto il testo:

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

allora si sarebbe rimuoverla con questo:

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

fonte

2015-09-10 08:30:38

Ci vai, uno snippet per te:

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/

su jsFiddle

fonte

2015-09-10 08:30:55

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>

fonte

2015-09-10 08:34:53 RRK

Prova in questo modo,

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/

fonte

2015-09-10 10:09:07

Jquery cancella il testo con effetto tipo

risposta

Problemi correlati