Есть ли простой способ анимировать определенный символ в строке?

Question

Я хочу затушить символ в строке, так что Whatever превращается в Wha ever.

$('p[2]').animate({ opacity: 0 }); 

Fiddle

Я хотел бы сделать это без упаковки каждого письма в HTML-теги, если это возможно.

Answer 1

Вам необходимо обернуть символ, который вы хотите использовать, чтобы применить эффект к этому элементу.

Try:

var hideLetter = function(element, position) { 
    var str = $(element).text(), 
     nstr = str.substr(0, position) + '<span>' + str.substring(position, position + 1) + '</span>' + str.substring(position + 1); 

    $(element).html(nstr); 

    $(element).find('span').animate({ 
     opacity: 0 
    }); 
}; 

hideLetter('p', 2); 

Fiddle

Answer 2

Смотрите, если это помогает http://jsfiddle.net/EP3nR/5/

// Wrap each letter in a span tag 
$('p').html(function(){ 
    return this.textContent.replace(/./g,'<span>$&</span>'); 
}); 

// Get 3rd char and hide it 
var char = $('p').find('span').eq(2).animate({opacity:0}).text(); 

// The char that was hidden 
$('h1').text(char); 

Вы также можете добавить символ после он получает скрытом, используя функцию обратного вызова:

$('p').find('span').eq(2).animate({opacity: 0}, function() { 
    $('h1').text(this.textContent); 
});