0

我希望隐藏一个简单 div 中包含的某些字符的所有实例。
基本上我所追求的是当页面加载某些字符（在本例中为's'和'e'）时会淡出并在字符所在的句子中留下空格。
到目前为止，这是我所掌握的：
HTML:
<div id="test">hello this is a test this is a test</div>​jQuery
:

$(document).ready(function(){
$('#test').html($('#test').html().replace("s"," "));
$('#test').html($('#test').html().replace("e"," "));
});​

这里也是一个有效的 jsFiddle：http: //jsfiddle.net/6vjt3/
但这所做的只是隐藏句子中的第一个“s”和“e”，而不是其余的。
最好我想发生的是jQuery会检测到这些字母并将它们慢慢淡化为白色，因此留下与字母成比例的空间，但根本无法弄清楚如何做到这一点。
任何建议都会很棒！

4

3 回答 3

2

如果您稍后需要返回原始数据，我建议您使用这种方法：

var $hiddenElement = $('<span>').addClass('hidden');

$('#test').html($('#test').html().replace(/s/g, $hiddenElement.text(s)));
$('#test').html($('#test').html().replace(/e/g, $hiddenElement.text(s)));

你的 CSS

.hidden {
  display: none;
}
于 2012-12-04T20:57:25.607 回答
1

我试着按照你提到的那样淡出它。见演示 http://jsfiddle.net/6vjt3/3/

完整代码：

$(document).ready(function(){
    var charToReplace = ['s', 'e'];
    $('#test').html(function (i, v) {
        var resultStr = '';
        for (var i = 0; i < v.length; i++ ) {
            var ch = v.charAt(i);

            if ($.inArray(ch, charToReplace) >= 0) {
               resultStr += '<span class="hideMe">' + ch + '</span>';  
            } else {
               resultStr += ch;
            }
        }

        return resultStr;
    }).find('.hideMe').fadeOut(1000, function () {
        $(this).css('opacity', 0).show();            
    });

    //lets bring it all back
    setTimeout(function () {
        $('#test').find('.hideMe').css('opacity', 1);
    }, 5000);
});

在替换时使用带有g（全局）的正则表达式。见下文，

$('#test').html($('#test').html().replace(/s/g," "));
$('#test').html($('#test').html().replace(/e/g," "));

演示：http: //jsfiddle.net/6vjt3/1/

于 2012-12-04T20:48:46.723 回答
1

您需要将这些字符包装在 SPAN 中，然后淡出 SPAN。使用替换将立即摆脱它们，但永远不会淡出。

于 2012-12-04T20:49:17.357 回答