jquery加载动画

Question

我搞乱jQuery的负载和淡入淡出动画，但我无法得到如何将它们一起工作的句柄。

我有一个函数，在每次点击下个月的时候用日历替换我的#ajaxdiv中的什么。它没有任何动画，但效果很好。

function ajaxCalendar(X,Y,Z){ 
var changemonthlink = "http://localhost:8888/myproject/calendar/view/" + X + "/" + Y + "/" + Z + "/1"; 
$("#ajaxdiv").load(changemonthlink); 
return false;  
}; 

现在，我想做些什么（如果它是很容易实现）是淡出/滑动格左边或右边的内容，然后滑动/负载向左或向右的新内容。任何帮助将是惊人的。

我已经这样做了，但它不起作用。浏览器导航到链接...

function ajaxCalendar(X,Y,Z){ 
      $('#ajaxdiv').hide('slow',loadContent()); 
      return false;  
}; 

function loadContent() { 
    var changemonthlink = "http://localhost:8888/myproject/calendar/view/" + X + "/" + Y + "/" + Z + "/1"; 
    $('#ajaxdiv').load(changemonthlink,'',showNewContent()); 
}; 


function showNewContent() { 
     $('#ajaxdiv').show('normal'); 
}; 

我已经将它重新安排到此。和最初的隐藏动画正在工作，但多数民众赞成在它。该div不会再显示。

function ajaxCalendar(X,Y,Z){ 
      $('#ajaxdiv').hide('slow',loadContent()); 

      function loadContent() { 
       var changemonthlink = "http://localhost:8888/myproject/calendar/view/" + X + "/" + Y + "/" + Z + "/1"; 
       $('#ajaxdiv').load(changemonthlink,'',showNewContent()); 
      } 

      function showNewContent() { 
        $('#ajaxdiv').show('normal'); 
      } 

      return false; 

}; 

最新功能工作，但时间关闭。日历的加载发生在fadeOut（）完成之前。我尝试在load（）函数之前放置一个延迟（300），但这只是延迟了初始淡出。

function ajaxCalendar(X,Y,Z){ 
      $('#ajaxdiv').fadeOut('300',loadContent()); 

      function loadContent() { 
       var changemonthlink = "http://localhost:8888/myproject/calendar/view/" + X + "/" + Y + "/" + Z + "/1"; 
       $('#ajaxdiv').load(changemonthlink,'',function(){ 
        $('#ajaxdiv').fadeIn('300'); 
       }); 
      } 

      return false; 

}; 

Answer 1

尝试切换到fadeIn()和​​代替show()和hide()

，并确保你正在分析你的函数的参数。

和使用$.get代替.load ...看我下面的代码

function ajaxCalendar(X, Y, Z) { 
    var changemonthlink = "/css/normalize.css"; //test url only {css file on same domain} 

    $.get(changemonthlink, function(data) { 
     $('#ajaxdiv').fadeOut('normal',function(){$('#ajaxdiv').html(data);}); 
     $('#ajaxdiv').fadeIn('normal'); 
    }).error(function(a, b, c) { 
     alert(b + ' : ' + c); 
    }); 
} 

见我的例子：http://jsfiddle.net/8E7vk/2/

Answer 2

尝试http://api.jquery.com/jQuery.ajax/ ，但参数async设置为false。