анимация загрузки jquery - PullRequest
Новая
       24

анимация загрузки jquery

1 голос
/ 04 июля 2011

Я возиться с анимацией загрузки и затухания и затухания в jQuery, но не могу понять, как их совместить.

У меня есть функция, которая заменяет то, что в моем #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'); 
};

Я переставил это в это. и начальная анимация скрытия работает, но это так. Див никогда не появляется снова. 

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 (). я попытался поместить задержку (300) прямо перед функцией load (), но это только задержало первоначальное затухание. 

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;   

};

Ответы [ 2 ]

1 голос
/ 04 июля 2011

Попробуйте переключиться на 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/

0 голосов
/ 04 июля 2011

Попробуйте http://api.jquery.com/jQuery.ajax/ НО, установите для параметра async значение false.

...