Pjax动画
我终于得到了pjax工作，但我有另一个问题..如何添加一些jquery动画，如fadeout / slideup旧内容和fadein / slidedown新内容？
默认情况下，pjax只是更改内容而没有任何好看的效果..
任何帮助将非常感激。
最好的祝福
基本上，你有一堆事件可以锁定并按你的意愿去做。 这是一个基本的fadeIn和fadeOut版本，使用pjax:start和pjax:end作为触发器。
$(document) .on('pjax:start', function() { $('#main').fadeOut(200); }) .on('pjax:end', function() { $('#main').fadeIn(200); })
显然你会将#main你正在交换内容的容器元素。
假设你想创建一个目录浏览器，就像GitHub一样。
让我们从Twitter Bootstrap的轮播开始，创建一个带标记的视图来使用它（希望你不介意haml）：
这是容器：
%div#uber-glider.glider.carousel.span12 %div.carousel-inner = yield %div#uber-glider-stage.glider-stage(style="display:none")
这里是一个部分示例，用于呈现其中的pjaxed内容：
%div.glider-group.item %div.glider-heading(data-title="#{@super_department.name} Super Department" data-resource="#{super_department_path @super_department.id}") %ul.breadcrumb %li %a.glider-link(href="#{divisions_path}")= "Divisions" %span.divider= "/" %li.active %a.glider-link(href="#{division_path @division.id}")= @division.name %span.divider= "/" %li.active = @super_department.name %div.glider-body - @super_department.departments.each_with_index do |department, i| %div.glider-listing %a.glider-link(data-glide="descend" data-target="#uber-glider" href="#{department_path department.id}") = department.name
现在让我们用pjax创建一些Javascript：
(function($){ "use strict"; $(function() { $('#uber-glider-stage').on('pjax:success', function(e){ var $incoming_group = $('#uber-glider-stage .glider-group') , $incoming_heading = $('#uber-glider-stage .glider-heading') , incoming_resource = $incoming_heading.data('resource') , $existing_groups = $('#uber-glider .glider-group') , $existing_headings = $('#uber-glider .glider-heading') , existing_last_idx = $existing_groups.length - 1 , matching_idx = -1; $existing_headings.each(function(idx) { if ($(this).data('resource') === incoming_resource) { matching_idx = idx; } }); if (matching_idx > -1) { // pop $incoming_group.remove(); $('#uber-glider').one('slid', function() { for (; existing_last_idx > matching_idx; existing_last_idx--) { $('#uber-glider .glider-group').last().remove(); } }); $('#uber-glider').carousel(matching_idx); } else { // push debug.debug("pushing 1 level"); $incoming_group.detach(); var $container = $('#uber-glider > .carousel-inner'); $container.append($incoming_group); $('#uber-glider').carousel('next'); } }); $('.glider-link').pjax('#uber-glider-stage', { 'timeout' : '3000' }).on('click', function(){ debug.debug(".glider-link click"); }); }); $('#uber-glider .carousel-inner .item').addClass('active'); $('#uber-glider').carousel('pause'); })(window.jQuery);
我猜装载指示器和动画或多或少都是一样的。 在这种情况下，使用pjax：send和pjax：complete事件。
来自pjax自述文件 ，
如果您正在实施加载指示器，send和complete是一对很好的事件。 只有在发出实际请求时才会触发它们，而不是从缓存中加载它们。