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

あなたがそれをフェードアウトすることについて言及したように私はやろうとしました.. DEMO 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);
});

置換時に (global) でregEx を使用し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 に答える