Question

当我点击分页链接时，我试图让我的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

的链接

我得到了效果，但它看起来不太好动画来得太快

Answer 1

尝试使用以毫秒为单位的值

<script type="text/javascript">
 $(document).ready(function(e){
   $('.ajaxpagination').on('click', function(e){
   $('#news_box').fadeToggle(4000);
    });
   });
</script>

div框在点击ajax分页时淡入

1 个答案: