jPlayer進度條上的重疊div

我正在使用jPlayer作爲客戶端，其中進度條是曲目的標題。隨着曲目的進展它會改變顏色。我用一種顏色的標題div來完成這個任務，並且將進度條放在最上面，並且標題用另一種顏色。隨着進度條的擴展，它會顯示新的彩色文字。如果我的描述是可怕的（我敢肯定它是），你可以去看看開發站點位置：jPlayer進度條上的重疊div

~~http://sublimio.matthew-ferry.com/sublimio/~~

正如你所看到的，單詞的標題上的進展很好。但是在多個單詞標題中，第一個單詞顯示得很好，然後對於後面的單詞，直到整個單詞完成後才顯示它們。

這是瀏覽器渲染問題，還是有什麼我可以做的，以解決這個問題？

第一JS：

$('.track').each(
     function() 
     { 
      var player_id = '#' + $('.jp-jplayer', this).attr('id'); 
      var audio_id = '#' + $('.jp-audio', this).attr('id'); 

      $('.jp-jplayer', this).jPlayer(
       { 
        "cssSelectorAncestor": audio_id, 
        swfPath: "js", 
        supplied: "mp3", 
        wmode:"window" 


      } 
      ); 

      $('.song', this).click(
       function(eve) 
       { 
        eve.preventDefault(); 
        $(this).jPlayer("progress"); 
        $('.jp-jplayer').jPlayer("stop"); 
        $(player_id).jPlayer(
         "setMedia", 
         { 
          mp3: $(this).attr("href") 
         } 
        ); 

        $(player_id).jPlayer("play"); 
        return false; 
       } 
      ); 
     } 
    );

現在（簡化的）HTML：

<ul> 
<li class="track"> 
    <div> 
     <div class="jp-controls"> 
      <span><a class="jp-play song" tabindex="1">play</a></span> 
      <span><a class="jp-pause" tabindex="1">pause</a></span> 
     </div> 
     <div class="title">Title With Multiple Words</div> 
     <div class="progress"> 
      <div class="jp-seek-bar"> 
       <div class="jp-play-bar">Title With Multiple Words</div> 
      </div> 
     </div> 
    </div> 
</li> 
...etc... 
</ul>

來源

2011-10-23 Matthew

哈，理解了它。 0％寬度的進度條將溢出文本包裝成多行。修復在進度條上使用white-space: nowrap;文字

來源

2011-10-31 02:43:45 Matthew

jPlayer進度條上的重疊div

回答

相關問題