このCSSを完全に展開します。インラインブロックdivスキャンライン

Question

このスキャンラインエフェクトを正しく動作させます。 には、の左から右へのテキストが表示されます。あたかも陰極線が画面上の蛍光体の中にそれを燃やしているかのように。

アイデアは透明な先端を持つ黒い行を横切ってスライドすることです。 Here is a 80% working demo. すべての行の一番右の黒.mask divは展開されません。ちがいない。

私は、黒い背景を持つ最も右側の.mask divをインラインブロックのままにして、全幅にしようとしました。私は幾分理解できません（width：100％は他のインラインブロックを次の行にプッシュするだけです）、javascriptの幅をハックすることなくこの完全な右側を取得する方法が必要です。以下

.row { 
     font-family:'Courier New',Courier,monospace; 
     font-size:16px; 
     display:block; 
     height:auto; 
     width:100%; 
     min-width:20%; 
     position:relative; 
     margin-right:0px; 
} 

.mask { 
     display:inline-block; 
     width:auto; /* 100% does not work */ 
     background:black; 
     white-space:pre; 
} 

Answer 1

それは絶対位置を使用していますbecuase（フルスクリーンのデモを見ていない限り）、これはjsbin上では動作しません..しかし、あなたがあなた自身のブラウザhttp://jsbin.com/uteyik/12/に貼り付け/コピーするために、私はとにかくそれを提供...変更のハイライトは以下のとおりです。

CSS：

.row { 
.. 
    position:absolute; /* changed to absolute */ 

} 
.mask { 
    .. 
    width:100%; /* changed to 100% */ 
    position:absolute; /*changed to absolute */ 
} 

とのjavascript：

jQuery(document).ready(function() { 
    function fill_box(rows) { 
     var rowHeight = getSampleRowHeight(); 
     var thisRowHeight = 0; 
     for(var i = 0; i < rows; i += 1) { 
      $('.box').append('<div class="row" style="top: '+thisRowHeight+'"><div class="scan_cursor i1"> </div><div class="scan_cursor i2"> </div><div class="scan_cursor i3"> </div><div class="mask"> </div></div>');  
      thisRowHeight +=rowHeight; 
     } 
    } 

    fill_box(30); 

    function tag_animate(el) { 
     // animate the mask 
     el.animate({ 
      'margin-left' : '100%' 
      }, 
      { 
       complete : function() {   
        tag_animate(el.parent().next().find('.mask')); 
       } 
      } 
     ); 
     // animate the stripes 
     el.siblings().animate({ 
      'margin-left': '100%' 
      }, 
      { 
       complete : function() {  
        el.siblings().hide(); 
       } 
      } 
     );  
    }  

    tag_animate($('.box').find('.row').eq(0).find('.mask')); 

    function getSampleRowHeight() { 
     // get sample row height, append to dom to calculate 
     $('.box').append('<div class="row" style="display: hidden"> <div class="scan_cursor i1"> </div></div>'); 
     var rowHeight = $('.row').height(); 
     $('.box').find('.row').remove(); 
     return rowHeight; 
    }  
}); 

説明：私はまずダミー行を作成し、その高さを計算します。次に、position: absoluteの行を作成し、ダミー行の高さx行番号を使用して上から配置します。 アイデア私は完全な位置付けですべてを作って、マスクが100％のときにストライプを押さないようにしたいと思っています。また、その行は絶対的なものでなければなりません。下の行が飛び上がる。

ボーナス：それは逆の方法（すなわち、テキスト消失）作業参照：http://jsbin.com/uteyik/9これが私の最初の（誤った）解答