Блог

Главная - Вопросы по программированию - Анимация затухания jQuery

Анимация затухания jQuery

#javascript #jquery #css #transition

#javascript #jquery #css #переход

Вопрос:

Мне нужно добавить fade-in-out анимацию перехода к этому коду загрузки ajax. Не мог бы кто-нибудь объяснить мне, как это сделать, пожалуйста?

JS : 

 function loadPage(url)
{
    url=url.replace('#page','');    
    $('#loading').css('visibility','visible');
    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page=' url,
        dataType: "html",
        success: function(msg){

            if(parseInt(msg)!=0)
            {
                $('#pageContent').html(msg);
                $('#loading').css('visibility','hidden');
            }
         }

       });

     }

Комментарии:

1. Почему бы не использовать fadeIn и fadeOut ?

2. Вы не можете входить или выходить из функции ajax. Вы можете вводить и удалять узлы DOM, пожалуйста, уточните свой вопрос получше.

3. @hellaFont, привет, он имеет в виду, когда перед вызовом ajax используется fadeIn , а во время успешного завершения — fadeOut. Что вы имеете в виду, не может затухать ? пожалуйста, прочтите api.jquery.com/Ajax_Events

4. @PratikJoshi, я имею в виду, что то, как был сформулирован его вопрос, звучало так, будто она / он хотел затухания самой функции ajax, а не узла DOM. Очевидно, что это не то, что она / он имел в виду, но она / он должен прояснить свой вопрос.

Ответ №1:

Используйте beforeSend() функцию ajax-запроса для fadeIn() успешного выполнения fadeOut() 

 $('#loading').css('visibility', 'visible');
$.ajax({
    type: "POST",
    url: "load_page.php",
    data: 'page='   url,
    dataType: "html",
    beforeSend: function () {
        $('#loading').fadeIn();
    },
    success: function (msg) {

        if (parseInt(msg) != 0) {
            $('#pageContent').html(msg);
            $('#loading').fadeOut();
        }
    }

});

Комментарии:

1. Просто в качестве дополнительного примечания, если функция ajax завершается с ошибкой или возвращаемые данные не равны нулю, вы застряли с загрузчиком.

2. «#loading» — это панель загрузки, то, что мне нужно затухать, это #PageContent, то есть содержимое <div>

3. @adeneo , мы можем добавить условие вместе с не равным нулю значением. Итак, после тестирования мы можем увидеть, каковы возможные результаты, и, соответственно, if () может быть изменен

4. @user3791817 , тогда вам следует уточнить HTML в вашем вопросе. Вы не добавили HTML, пожалуйста, добавьте его, если сможете, чтобы получить правильный ответ.

Ответ №2:

Я надеюсь, вы хотите показать влияние результата ajax на успех. Вы можете попробовать это.

 $.ajax({
    type: "POST",
    url: "institutions-filter.action",
    data: data,
    cache: false,
    success: function(msg)
    {
        if(parseInt(msg)!=0)
        {
          $('#loading').css('visibility','hidden');
          $("#pageContent").fadeOut(400, function()
          {
              $("#pageContent").html(msg).fadeIn(400);
          });
        }
    }
});