Плавное угасание после Ajax с JQuery - PullRequest
Новая
       5

Плавное угасание после Ajax с JQuery

0 голосов
/ 05 декабря 2010

Я использую jquery ajax для смены страницы на моем сайте. мой код такой: 

$('#'+target).fadeOut('slow', function(){
        $('#' + target).children().remove().end().append('<div style="width:' + loadingImageWidth + 'px;height:' + loadingImageHeight + 'px;background-color:black;-moz-border-radius:15px;"></div>');
        $('#'+target).fadeIn('slow', function(){
            $.ajax({
                type: type,
                url: url,
                success: function(msg){
                    $('#'+target).fadeOut('slow', function(){
                        $('#'+target).html(msg);
                        $('#'+target).fadeIn('slow', function(){});
                    });
                }
            });
        });
    });

Моя проблема в том, что когда я использую затухание, изменяются ширина и высота "#target" div, поэтому прокрутка моей страницы меняется, и это действительно раздражает, потому что кажется, что страница прыгает вверх и вниз! Я хочу знать, как я могу использовать затухание JQuery с плавным эффектом. спасибо, ребята.

Ответы [ 2 ]

2 голосов
/ 05 декабря 2010

Трудно диагностировать, не видя вашей разметки и CSS, но что может сработать, так это заставить родителя цели поддерживать свою высоту / ширину при анимации.

Вы можете сделать это, установив размеры родительского элемента в высоту цели до того, как вы исчезнете, а затем вы можете обновить размеры родителя, когда затухание завершится.

Сделайте это перед тем, как начать: 

$('#'+target).parent().height($('#'+target).height()).width($('#'+target).width());

И затем вы можете вызвать тот же код внутри блока успеха.

P.S. Как совет по производительности, конкатенация строк и поиск в dom обходятся дорого, лучше кэшировать свою цель и использовать ее в своем коде. Например: 

var target = $('#'+target);
target.fadeOut('slow');

Тогда вы выполняете конкатенацию и поиск только один раз и используете одну и ту же ссылку во всем коде.

0 голосов
/ 05 декабря 2010

Может быть, это могло бы решить: Анимационный прыжок - быстрый совет (Но эта ошибка исправлена ​​начиная с jQuery 1.3.)

...