有没有一种简单的方法可以对字符串中的特定字符进行动画处理

Question

我想淡化字符串中的字符，以便Whatever变成Wha ever。

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

小提琴

如果可能的话，我想在不将每个字母包装在 HTML 标签中的情况下做到这一点。

Answer 1

您需要包装要遮罩的字符，以对此元素应用效果。

尝试：

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

小提琴

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