我是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>

===============>>#1 票数:2 已采纳

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

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

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>

  ask by pyRabbit translate from so

未解决问题?本站智能推荐:

关注微信公众号