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

Ok。ここでいくつか問題がありました。このティッカー スクリプトには jQuery が必要であり、./app/assets/javascripts/application.js を通じて、アプリケーション内のすべての JavaScript が順番にロードされることが重要です。

最初に行うことは、スクリプトを ./app/assets/javascripts の別のファイルに入れることです。このファイルには scroll.js という名前を付けました。

次に、application.js に移動して、次の行を追加します。

//= require scroll

必要なリストの最後に配置する必要があり、jquery の後に jvnill が提案しました。その後、ビュー内のクラスに適切な名前が付けられていることを確認してください。この時点で関数が機能しない場合は、名前を付けて次の行を追加します。

name();

scroll.js ファイルの最後にあります。( name は関数の名前です)

于 2013-02-25T16:48:34.160 に答える