Question

我正在使用显示更多按钮从数据库中获取新结果，但我面临一个小问题，我需要它每次点击时显示淡入淡出效果，但我只在第一次得到淡入淡出，是什么问题？这是我的代码：

<input type="hidden" id="direction" value="{$page+1}" />
<script type="text/javascript">
$(document).ready(function(){

 $('#show_more').click(function(){  
    $('#results_ajax').fadeIn("slow").delay(1000);
    var ajax_url = "../profile/results_ajax/";
    var direction = parseInt( $('#direction').val() );
      $.ajax({
        url: ajax_url + direction,
        type : "POST",
        dataType :"html",
        success : function(msg){
            $('#direction').val(direction + 1);
             $('#results_ajax').append(msg)

        }        
      });
    });
    });
</script>

<div style="float: right;width:72%;margin-right:20px;">
<table width="100%" style="border-bottom:0px;">
<tr class="tbl">
<td colspan="4">{$ci->lang->line('results_archive')}</td>
</tr><tr>
<td class="tbl1" style="width: 50%;">{$ci->lang->line('exam_title')}</td>
<td class="tbl2" style="width: 15%;">{$ci->lang->line('score')}</td>
<td class="tbl1" style="width: 15%;">{$ci->lang->line('percentage')}</td>
<td class="tbl2" style="width: 20%;">{$ci->lang->line('date')}</td>
{foreach $results as $result}
<tr>
<td class="tbl1" style="width: 50%;">{$result.id}.{$result.exam_title}</td>
<td class="tbl2" style="width: 15%;">{$result.score} / {$result.full_mark}</td>
<td class="tbl1" style="width: 15%;">{$result.percentage}%</td>
<td class="tbl2" style="width: 20%;">{date('d-m-Y',{$result.date})}</td>
</tr>
{/foreach}
</table>
<div id="results_ajax" style="display:none;"></div>
<button id="show_more">Show More</button>
</div>

这是结果页面的代码：

<table width="100%" style="border-top:0px;border-bottom:0px;">
{foreach $results as $result}
<tr>
<td class="tbl1" style="width: 50%;">{$result.id}.{$result.exam_title}</td>
<td class="tbl2" style="width: 15%;">{$result.score} / {$result.full_mark}</td>
<td class="tbl1" style="width: 15%;">{$result.percentage}%</td>
<td class="tbl2" style="width: 20%;">{date('d-m-Y',{$result.date})}</td>
</tr>
{/foreach}
</table>
</div>

Answer 1

如果您想要{AJ}请求中的.fadeIn新数据，请从此更改success功能

success : function(msg){
            $('#direction').val(direction + 1);
             $('#results_ajax').append(msg)
        }

到这个

success : function(msg){
  $('#direction').val(direction + 1);
  $(msg).css('display', 'none').appendTo('#results_ajax').fadeIn(2000);
}

Answer 2

有趣的问题！我从你的代码中看到你写的，

$(#results_ajax).fadeIn().delay(1000);

在ajax调用之前

，然后期望稍后追加的与选择器#results_ajax匹配的元素显示该行为。您希望能够为将来展示的DOM节点定义行为。就像，“每次新元素出现在#results_ajax中时，它都会淡入”。你可以通过隐藏新元素然后将它们淡入其中来实现这一点，正如其他地方所建议的那样，但它让我觉得你更喜欢更有趣的东西。

您可以使用Mutation Observer API为将来的DOM节点创建规则。这使您可以设置侦听DOM中的更改而不是用户行为的事件侦听器。所以你可以说，“任何时候#results_ajax获得一个新的.msg元素，淡入它。

您还可以使用better-dom的{{3}}

之类的内容

你想要的还有点像live-extensions“输入，更新，退出”范例。

你问了一个非常简洁的问题，就是坐在网络的最前沿。我希望你对我指向你的资源感到非常兴奋，或者总有一天会有人这样做。

Jquery附加fadeIN并显示更多按钮

2 个答案: