JQuery滾動動畫不粘在DIV內

我有一個問題，我一直試圖在我的網站內實現一個JQuery動畫。JQuery滾動動畫不粘在DIV內

總的想法是我的頁面上有一個頁腳，分成兩個TD。第1部分是根據第2部分中滾動的消息而變化的圖標。

我的HTML本質上是這樣的：

<div id="footer"> 
    <div class="box-ticker round"> 
     <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:60px;"> 
      <tr> 
       <td style="width:12%;background:#6dc5ed;" align="center" valign="middle"><img id="image_scroll" /></td> 
       <td style="width:88%;background:#9f88e2;padding;10px" class="biggest" valign="middle"> 
        <div id="ticker"></div> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div>

我的代碼更新這樣的：

編輯：變量「HTML」是JSON的一個名爲不佳陣列。它包含我正在填充的數據。例如：HTML [0] = { '標題'： '這是一個消息'， '圖標'： '的icon.png'}

$('#ticker').html("<span class='scrollingtext' id='scroll_text'></span>"); 
cur_index=0; 
max_index=html.length; 
$(document).ready(function() { 
    $('.scrollingtext').bind('marquee', function() { 
     if (cur_index >= max_index) { cur_index = 0; } 
     obj = JSON.parse(html[cur_index]); 
     $('#image_scroll').attr('src',"img/"+obj.icon); 
     $('#scroll_text').html(obj.title); 
     var scrolling_text = $('#scroll_text'); 
     var text_container = $('#ticker'); 
     var tw = scrolling_text.width(); 
     var ww = text_container.width(); 
     scrolling_text.css({ right: -tw }); 
     scrolling_text.animate({ right: ww }, 30000, 'linear', function() { 
      cur_index++; 
      scrolling_text.trigger('marquee'); 
     }); 
    }).trigger('marquee'); 
});

最後我的CSS：

.box-ticker{ 
    width:100%; 
    height:56px; 
    background:#d44d4d; 
}  

.round { border-radius: 20px; } 

.scrollingtext{ 
    position:absolute; 
    vertical-align:middle; 
    white-space:nowrap; 
    font-family: 'AsapBold', Arial, sans-serif;font-weight:normal; 
    font-size:30px; 
    float: right; 
    color:#FFFFFF; 
}

問題當消息在屏幕上滾動時，它看起來並沒有被鎖定到「ticker」DIV中，而是直接滾動到頁面底部，似乎忽略了我在那裏的每個DIV標籤。當我觀察Chrome控制檯內的對象更新時，HTML似乎出現在正確的位置。

還有一個奇怪的問題，似乎跟隨着動畫沿着尾點。這似乎並沒有發生在Firefox內。

任何建議，將不勝感激。

謝謝！

來源

2013-08-27 insultant

什麼是'html'？你應該不定義它嗎？還是你的意思是這個'$（「html」）.length'？ – u54r

它是我用來填充對象的傳入數據。對不起，它措辭相當糟糕，我會解決所有這一切，一旦我得到的東西終於正常工作。我已經更新了這個問題，使它更清晰一些。 – insultant

好的發現它。你的問題似乎是你的CSS。見工作示例here

添加到您的CSS

#ticker{width:100%;overflow:hidden; display:block; } 

.scrollingtext{ 
position:relative; 
vertical-align:middle; 
white-space:nowrap; 
font-family: 'AsapBold', Arial, sans-serif;font-weight:normal; 
font-size:30px; 
float: right; 
color:#FFFFFF; 
}

注：我不得不做出改變你的HTML對象，使其與工作的jsfiddle。如果你對你沒有問題，你可以忽略js代碼。

來源

2013-08-28 00:50:12 u54r

完美的作品！非常感謝！ – insultant

JQuery滾動動畫不粘在DIV內

回答

相關問題