Question

我正在搞乱jQuery的加载和fadein以及fadeout动画，但我无法理解如何将它们组合在一起。

我有一个功能，每当我点击下个月时，我会用#ajaxdiv替换我的日历。它没有任何动画，但效果很好。

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

现在我想做的事情（如果它很容易实现）是向左或向右淡出/滑动div的内容，然后向左或向右滑动/加载新内容。任何帮助都会很棒。

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

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()和fadeOut()，而不是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。

jquery加载动画

2 个答案: