0

我想做一个淡出的新闻行情。代码似乎没问题，但它不起作用。现在我已经将样式和脚本放在 html.erb 中（它是一个 ruby​​ on rails 部分）

<ol>
 <li class="divider">Company Pulse</li>
</ol>
  <ol id="scrollable" style="height:90px; overflow:hidden;">
    <% @tweets.each do |tweet| %>
       <li>
          <%= link_to "
            <div id=\"twitter_presence\" style=\"vertical-align: middle;\">
            <img src=\"#{tweet.user.profile_image_url}\" style=\"vertical-align:middle;\"/>
            <span style=\"vertical-align: middle;\">#{tweet.user.name}</span>
           </div>
            <span id=\"twitter_text\">
            <h3 style=\"text-align: center\">\" #{tweet.text} \"</h3>
            <h3 style=\"text-align:right\">#{tweet.created_at}</h3>
            </span>
          ".html_safe, 'employees/twitter' %>
      </li>
    <% end %>
  </ol>

<script type="text/javascript">
 var aniSpd01 = 1000;
 var fadeSpd01 = 1000;

 $(function()
 {
    var startIndex = 0;
    var endIndex = $('#scrollable li').length;
    $('#scrollable li:first').fadeIn(fadeSpd01);

    window.setInterval(function()
    {
        $('#scrollable li:eq(' + startIndex + ')').delay(fadeSpd01).fadeOut(fadeSpd01);
        startIndex++;
        $('#scrollable li:eq(' + startIndex + ')').fadeIn(fadeSpd01);

        if (endIndex == startIndex) startIndex = 0;
     }, aniSpd01);
 });
</script>

可能出了什么问题以及如何解决？

4

2 回答 2

0

抱歉，我推出了自己的 js。你能试试这个吗？

var fadeOutSpeed = 1000,
    transitionSpeed = 1000,
    idx = 0;

function showNews() {
  $('#scrollable li').fadeOut(fadeOutSpeed, function() {
    $('#scrollable li:eql(' + idx + ')').fadeIn();
  });

  idx += 1;
  if (idx == $('#scrollable li').length) idx = 0;
  setTimeout('showNews()', transitionSpeed); 
}

function() { showNews() }
于 2013-02-12T13:34:41.477 回答
0

好的。这里有几件事不对劲。这个ticker脚本需要jQuery，重要的是应用程序中的所有javascripts都按顺序加载，通过./app/assets/javascripts/application.js

首先要做的是将脚本放在 ./app/assets/javascripts 的单独文件中，我将文件命名为 scroll.js

接下来，转到 application.js 并添加一行：

//= require scroll

它应该放在 require 列表的末尾，在 jquery 之后，一个 jvnill 建议。之后，确保视图中的类被相应地命名。如果此时该函数不起作用，请为其命名并添加一行：

name();

在 scroll.js 文件的末尾。（其中 name 是函数的名称）

于 2013-02-25T16:48:34.160 回答