当我点击分页链接时,我试图让我的 div 框慢慢淡入淡出
继承人
js
<script type="text/javascript">
$(document).ready(function(e){
$('.ajaxpagination').on('click', function(e){
$('#news_box').fadeToggle('slow');
});
});
</script>
继承人的html
<h2 class="black"> Recent News <div class="line_section"><div> </h2>
<%= ajax_links :section_id => "recent_news" do %>
<%= will_paginate @news_all %>
<% end %>
<div id="news_box" class="row">
<div class="span12">
<ul class="recent-news">
<%= ajax_loadzone do %>
<% @news_all.each do |news| %>
<li style="font-size: 16px; line-height: 19px; letter-spacing: 1px; font-size: 14px; color: #555; text-align: left;">
<%= link_to image_tag(news.photo.url), news, class: 'pull-left', style: 'margin-right:40px; margin-top: 2px; width: 300px;' %>
<div style=" width: 600px; float: right;">
<%= link_to news.title, news %> <br />
<%= link_to news.date, news, style: 'font-size: 10px; color: black; position: relative; top: 15px;' %>
<i style="position: relative; top: 18px;" class="icon-comment"><%= link_to (news.comments.count), news, :style => 'font-size: 8px; color: white; font-weight: bold; position: absolute; top: 0px; right: 5px;' %></i>
<br /> <br />
<%= truncate news.content, length: 500 %> <br />
<%= link_to 'Read More...', news, style: 'font-size: 12px !important;' %>
</div>
</li>
<% end %>
<% end %>
<%= will_paginate @news_all %>
</div><!-- end span12 -->
</div><!-- end row -->
这是页面的链接http://www.batman-fansite.com/batnews
我得到了效果,但它看起来不太好,动画来来去去太快了