使用Jquery和Rails淡化效果

Question

我是jQuery的新手，我想对我在rails应用程序中创建的项目应用淡入效果。 该对象附加到DOM但淡入淡出效果似乎不起作用！ 这似乎应该是一个相当简单的解决方案，但我认为rails实例变量正在抛弃它。 我已经尝试将我的创建javascript包装在文档就绪函数中，但这似乎也没有帮助。 先感谢您！

index.html.erb

<div class="row">
  <div class="col-lg-12">
    <% @events.each do |event| %>      
      <%= render event %>
    <% end %>
  </div>
</div>

create.js.erb

$('#new_event').remove();
$('#new_event_link').show();
$('#events').append('<%= j render(@event) %>').fadeIn(5000);

_events.html.erb

<ul id="events">
  <li>
    <h4><%= event.location %></h4>
    <p><%= event.description %></p>
  </li>
</ul>

对于其他人，以下是工作代码

index.html.erb

<div class="row">
  <div class="col-lg-12">
    <ul class="events">
      <% @events.each do |event| %>      
        <%= render event %>
      <% end %>
    </ul>
  </div>
</div>

create.js.erb

$('#new_event').remove();
$('#new_event_link').show();
$('#events').append($('<%= j render(@event) %>').hide().fadeIn(5000));

_events.html.erb

<li>
  <h4><%= event.location %></h4>
  <p><%= event.description %></p>
</li>

Answer 1

淡入效果没有显示，因为一旦你附加新元素它们已经可见，所以没有什么可以淡入。 在这个答案中描述了这样做的正确方法。 我用一般的想法做了一个快速的小提琴 。

顺便说一句，我不太了解你的模板，我认为它们应该是这样的：

index.html.erb

<div class="row">
  <div class="col-lg-12">
    <ul id="events">
      <% @events.each do |event| %>      
        <%= render event %>
      <% end %>
    </ul>
  </div>
</div>

_event.html.erb

<li>
  <h4><%= event.location %></h4>
  <p><%= event.description %></p>
</li>