0

次のコードが IE で機能しない理由を知っている人はいますか? （他のブラウザでは問題なく動作します）

            div.hide().contents().each(function() {
                var words;
                if (this.nodeType === 3) {
                    words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>';
                    $(this).replaceWith(words);
                } else if (this.nodeType === 1) {
                    this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';
                }
            });

            // Remove any empty spans that were added
            div.find('span').hide().each(function() {
                if( !$.trim(this.innerHTML) ) {
                    $(this).remove();
                }
            });

            div.show().find('span').each(function(i) {
                $(this).css('filter', 'alpha(opacity=40)');
                $(this).delay(400 * i).fadeIn(600);
            });

単語ごとの表示効果を IE で動作させるための回避策はありますか?

編集：

ここにフィドルを作成しました：http://jsfiddle.net/8dh3F/

4

2 に答える 2

0

問題はこの行にあります。IE9 では動作しますが、8 または 7 では動作しません。

this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';

好きじゃないthis.innerHTML。ありがたいことに、jQuery を使用しています。

代わりにこれを使用してください：

$(this).html(function(index, oldhtml){
    return '<span> ' + oldhtml.split(/\s+/).join(' </span><span> ') + ' </span>';
});
于 2012-07-27T01:44:28.513 に答える
0

OK、lettering.js ライブラリを使用して、IE で文字ごとに表示する方法を見つけました (他のブラウザでも機能します)。

HTML マークアップ:

<div class='intro'>
    <div class='starthidden intro'>{{ poem.introLine1 }}</div>
    <div class='starthidden intro'>{{ poem.introLine2 }}</div>
    <div class='starthidden intro'>{{ poem.introLine3 }}</div>
    <div class='starthidden intro'>{{ poem.introLine4 }}</div>
    <div class='starthidden intro'>{{ poem.introLine5 }}</div>
    <br>
</div>
<div class='verse'>
    <div class='starthidden trait'>{{ poem.traitLine1 }}</div>
    <div class='starthidden trait'>{{ poem.traitLine2 }}</div>
    <div class='starthidden trait'>{{ poem.traitLine3 }}</div>
    <div class='starthidden trait'>{{ poem.traitLine4 }}</div>
    <div class='starthidden trait'>{{ poem.traitLine5 }}</div>
    <br>
</div>
etc

JQuery:

var div = $('.starthidden');
var delay = 400;
var fadeIn = 600;
div.lettering();
div.find('span').hide();
div.show().find('span').each(function(i) {
   $(this).delay(delay * i).fadeIn(fadeIn);
});
于 2012-08-01T09:10:48.747 に答える