jquery - 如何将 CSS3 转换回调与 jQuery.ajax 结合使用

Question

我使用以下 jQuery 代码片段来执行 AJAX 请求:

$.ajax({
    url: page,
    context: $(pageContent),
    beforeSend: function(){
        $(pageContent).css('opacity', '0');
    },
    success: function(html){
        $(pageContent).html(html);
    },
    complete: function(){
        $(pageContent).css('opacity', '1');
    }
});

我还设置了 CSS3 过渡，以便不透明度的变化在 0.25 秒内淡入淡出。期望的结果是(单击链接后)页面的一部分淡出，然后内容被替换，最后该部分再次淡入(显示新内容)。

问题在于，在淡出转换完成之前，内容被 Ajax 响应替换。

如何才能仅在 CSS3 转换完成后启动 AJAX 请求？

<小时/>

阅读不同的线程让我考虑这个解决方案:

box.addEventListener( 
     'transitionEnd', 
     function( event ) { 
         alert( "Finished transition!" ); // here I could launch my Ajax request
     }, false );

我可以使用类似的方法仅在淡出完成时启动 ajax 请求，但是:

• 它涉及处理 $.ajax 方法之外的第一个转换(从而删除 beforeSend 方法)
• 我不知道如何只在不透明度转换时监听
• 我认为 ajax 请求是由转换触发的，这对我来说并没有什么意义，因为它目前是由点击链接触发的。

我还查看了 jQuery 动画函数，但它似乎没有使用 CSS3 过渡。

任何帮助将不胜感激

Answer 1

如果您愿意放弃 jquery animate 的过渡:

$(pageContent).animate({'opacity': '0'},250,
   function(){
      $.ajax({
          url: page,
          context: $(pageContent),
          success: function(html){
              $(pageContent).html(html);
          },
          complete: function(){
              $(pageContent).animate({'opacity': '1'},250);
          }
      });
   });

没有测试它，所以如果语法略有偏差，抱歉。不过给你这个想法。一旦动画到 0 不透明度完成，就会进行 ajax 调用。