Jquery Marquee的動態內容 - 動態寬度也是？

Question

我將數據庫中的動態內容添加到我在網上找到的選取框中。問題是 - 內容長度差異很大，腳本需要一個設置的靜態寬度才能正常工作。我需要找出一種方法在我拉取內容時生成寬度，或者讓腳本自動爲項目生成寬度。這實際上是我在這裏找到的點腳本。這裏有一個JSFiddle來看看它是如何工作的。

對於那些誰不喜歡的jsfiddle這裏有一些簡單的HTML/CSS

<h1>This runs differently than the ticker for some reason. It's highly annoying in my personal opinion.</h1> 
<div id="ticker">  
    <div class="event">test1</div> 
    <div class="event">This is Test 2</div> 
    <div class="event">test3</div> 
    <div class="event">This is test number 4</div> 
</div>​ 

CSS

.event{float: left;} 
/* Add width and it will run, sorta fine 
.event{width:100px;} 
*/ 

jQuery的

(function($) { 
     $.fn.textWidth = function(){ 
      return $(this).width(); 
     }; 

     $.fn.marquee = function(args) { 
      var that = $(this); 
      var $textWidth = that.textWidth(), 
       offset = that.width(), 
       width = offset, 
       css = { 
        'text-indent' : that.css('text-indent'), 
        'overflow' : that.css('overflow'), 
        'white-space' : that.css('white-space') 
       }, 
       marqueeCss = { 
        'text-indent' : width, 
        'overflow' : 'hidden', 
        'white-space' : 'nowrap' 
       }, 
       args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args), 
       i = 0, 
       stop = $textWidth*-1, 
       dfd = $.Deferred(); 
      function go() { 
       if (that.data('isStopped') != 1) 
       { 
       if(!that.length) return dfd.reject(); 
       if(width == stop) { 
        i++; 
        if(i == args.count) { 
         that.css(css); 
         return dfd.resolve(); 
        } 
        if(args.leftToRight) { 
         width = $textWidth*-1; 
        } else { 
         width = offset; 
        } 
       } 
       that.css('text-indent', width + 'px'); 
       if(args.leftToRight) { 
        width++; 
       } else { 
        width--; 
       } 
      } 

       setTimeout(go, 10); 
      }; 
      if(args.leftToRight) { 
       width = $textWidth*-1; 
       width++; 
       stop = offset; 
      } else { 
       width--;    
      } 
      that.css(marqueeCss); 
      that.data('isStopped', 0); 
      that.bind('mouseover', function() { $(this).data('isStopped', 1); }).bind('mouseout', function() { $(this).data('isStopped', 0); }); 
      go(); 
      return dfd.promise(); 
     };   
    })(jQuery); 
     $('h1').marquee(); 
     $('#ticker').marquee();​ 

的第一件事我想過在生成選取框之前獲取每個列表項的寬度，並將內聯寬度。我無法弄清楚如何做到這一點，過了一段時間後，我放棄了它。這裏有一個指向website的鏈接 - 通過ajax添加內容。選框在頂部。稍後我會刪除鏈接。我應該做什麼的建議？

Answer 1

只是一個想法，我沒有看到你添加動態部分的代碼，但他們必須在<div>標籤內嗎？你可以用.append()代替嗎？

喜歡的東西：

$('#ticker').append(response.data); //or whatever the variable would be 

所以基本上它只是增加了文本該分區而不是單獨的div的。 您可能不需要開始滾動，直到所有數據都被追加，以便選取框插件補償新添加的文本。

OR

下面是一些代碼，你可以使用，將解決您最初的問題：

添加此功能代碼：

$.fn.textWidthTrue = function(){ 
    var html_org = $(this).html(); 
    var html_calc = '<span>' + html_org + '</span>'; 
    $(this).html(html_calc); 
    var width = $(this).find('span:first').width(); 
    $(this).html(html_org); 
    return width; 
}; 

正如在這裏看到：Calculating text width

然後加上：

$('#ticker').find('.event').each(function(i){ // set the width correctly 
    $(this).width($(this).textWidthTrue()); 
}); 

的jsfiddle：http://jsfiddle.net/NYQEL/12/